Me gustaría cambiar el CSS de las casillas de verificación deshabilitadas en una grilla (son demasiado difíciles de ver para los usuarios). ¿Cuál es una forma simple de hacer esto?
Mi preferencia en las tecnologías utilizadas (en orden descendente):
CSS
JavaScript
jQuery
Other
He tenido buena suerte con algunas bibliotecas de JS para hacer el trabajo. De acuerdo, mi requisito era hacer que las cajas se vean muy diferentes de la casilla de verificación estándar. La siguiente biblioteca es incluso 508 compatible.
básicamente, debe adjuntar el evento onclick en div, p, o cualquier otro elemento utilizado para una grilla y luego transferir el valor verificado al elemento oculto asociado con ese campo en una grilla. que es muy trivial, si se usa javascript - marque jquery para agregar el evento onclick en cualquier elemento. si se hace clic, establezca el valor = 1 para el elemento oculto.
Sugeriría cambiar el color del fondo (el background-colorde la forma / fieldset), y ver si se puede obtener un mejor contraste. Si solo desea cambiar el color de las casillas de verificación desactivadas (¿no seleccionables?), Puede intentar:
input[disabled] {
...
/* CSS here */
...
}
Pero si están deshabilitados por alguna razón, seguramente no necesitan ser visibles de forma destacada. El objetivo de que estén atenuados es, seguramente, evitar la confusión entre los elementos activos / habilitados y los inactivos / deshabilitados?
input:disabled {}funciona para todos los navegadores excepto-lo adivinaste-IE. Para IE, supongo que tendrás que usar alguna biblioteca JS.
Mantenga la casilla de verificación está activada, pero a continuación, añadir onfocus=this.blur()a la casilla de verificación por lo que no se puede hacer clic.
O si el uso de ASP.net (como usted dice en su comentario) mantener la casilla de verificación para establecer habilitado y añadir el siguiente al evento Page.Load:
CheckBox1.Attributes.Add("onclick", "return false;");
Si usted tiene una forma con una mezcla de casillas de verificación activo e inactivo, teniendo las casillas de verificación con discapacidad se desvanecieron evita la confusión para el usuario. Si la intención es mostrar una página de sólo lectura con casillas de verificación (por ej. Para mostrar las opciones de productos seleccionados en un recibo de compra), entonces la sustitución de los elementos de entrada casilla con imágenes pueden rendir mejores resultados.
Reemplazar
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
con
<img src="unchecked.gif">
<img src="checked.gif">
En realidad con un poco de CSS3 puede burlarse de una solución muy simplista. Siempre se tendrá que considerar qué tipo de apoyo que desea ofrecer. Pero si estás bien con que funcione en los navegadores modernos, simplemente darle una oportunidad.
Aquí está el código HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Aquí está la CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
Y aquí está la DEMO http://jsfiddle.net/DyjmM/