¿Cómo configurar CSS para casillas de verificación deshabilitadas?

Question

Me gustaría cambiar el CSS para las casillas de verificación deshabilitadas en una cuadrícula (son muy difíciles de ver para los usuarios). ¿Qué es una forma simple de hacer esto?

Mi preferencia en las tecnologías utilizadas (en orden descendente):
CSS
JavaScript
jQuery
Otro

Answer 1

Sugiero cambiar el color del fondo (el background-color del formulario / fieldset), y ver si se puede lograr un mejor contraste. Si solo desea cambiar el color de las casillas de verificación deshabilitadas (¿no seleccionables?), Puede probar:

input[disabled] {
...
/* CSS here */
...
}

Pero si están deshabilitados por una razón, ¿seguramente no necesitan ser visibles de manera prominente? El objetivo de que estén en gris es, seguramente, evitar la confusión entre los elementos de formulario activos / habilitados e inactivos / deshabilitados.

Answer 2

Mantenga la casilla de verificación activada, pero luego agregue onfocus = this.blur () a la casilla de verificación para que no se pueda hacer clic.

O si usa ASP.net (como dice en su comentario) mantenga la casilla de verificación activada y agregue lo siguiente al evento Page.Load:

CheckBox1.Attributes.Add("onclick", "return false;");

Answer 3

He tenido buena suerte con algunas bibliotecas JS para hacer el trabajo. Por supuesto, mi requisito era que las casillas fueran muy diferentes de las casillas de verificación estándar. La siguiente biblioteca es compatible incluso con 508.

Controles de formulario con estilo

Answer 4

input: disabled {} funciona para todos los navegadores excepto, usted lo adivinó, IE. Para IE, supongo que tendrás que usar alguna biblioteca JS.

Answer 5

básicamente, debe adjuntar el evento onclick en div, p, o cualquier otro elemento utilizado para una cuadrícula y luego transferir el valor marcado a un elemento oculto asociado con ese campo en una cuadrícula. lo cual es muy trivial, si se usa javascript - verifique jquery para agregar el evento onclick en cualquier elemento. si se hace clic, establezca un valor = 1 para el elemento oculto.

Answer 6

En realidad, con un poco de CSS3 puedes simular una solución muy simplista. Siempre tendrá que considerar qué tipo de apoyo desea ofrecer. Pero si está de acuerdo con que funcione en navegadores modernos, simplemente inténtelo.

Aquí está el HTML

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

Aquí está el CSS

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

Y aquí está la DEMO http://jsfiddle.net/DyjmM/

Answer 7

Si tiene un formulario con una combinación de casillas de verificación habilitadas e inhabilitadas, la desactivación de las casillas de verificación deshabilitadas evita la confusión para el usuario. Si la intención es mostrar una página de solo lectura con casillas de verificación (por ejemplo, para mostrar las opciones de productos seleccionadas en un recibo de compra), el reemplazo de los elementos de entrada de la casilla de verificación con imágenes puede generar mejores resultados.

Reemplazar

<input type="checkbox" disabled>
<input type="checkbox" disabled checked>

con

<img src="unchecked.gif">
<img src="checked.gif">