2012-05-21 1 views

Respuesta

15

tiene que desactivar la casilla de verificación también:

<input type="checkbox" onclick="return false;" disabled="disabled"> 

Para contabilizar el valor, basta con que sea de sólo lectura en su lugar:

<input type="checkbox" onclick="return false;" readonly="readonly"> 

puede etiquetar casilla estilo y entradas de sólo lectura con CSS, por ejemplo: entrada [readonly = "readonly"] {} pero el navegador debe hacer que la casilla de verificación aparezca atenuada cuando se establece en solo lectura.

Actualizado:

Usted está en la merced del navegador cuando se labra casillas de verificación & al estilo de ellos consistente en todos los navegadores, hay que recurrir a las imágenes por ejemplo: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

si no' t desea hacer esto (y parece una solución longwinded), la solución más simple es desactivar la casilla para que aparezca correctamente, y publicar el valor como una entrada oculta, por ejemplo:

<input type="checkbox" onclick="return false;" disabled="disabled"> 
<input type="hidden" name="checkboxval" value="111" /> 
+0

color: #aaaaaa; - Sí. Necesito algo como esto. Pero en realidad esto no cambia la apariencia de todos modos – Roman

+0

@Roman ¿qué navegador estás usando? La casilla de verificación en sí debe aparecer atenuada simplemente configurando el atributo de solo lectura. Si desea que la etiqueta aparezca en gris, configure el css. Vea esto: http: //jsfiddle.net/Btvpq/ – FluffyKitten

+0

"la casilla de verificación en sí debe aparecer atenuada simplemente configurando el atributo de solo lectura" - Probé en IE8, FF12.0, Chrome. Solo funciona en Chrome. – Roman

2

sólo tiene que añadir el atributo 'desactivado' en la casilla de verificación de la misma familia

<input type="checkbox" disabled="disabled" /> 
+0

. No es necesario agregar el atributo de onclick – Talha

4
<input type="checkbox" class="readonly"> 

Css

input.readonly { 
    opacity : .50; 
    filter : alpha(opacity=50); /* IE<9 */ 
    cursor : default; 
} 

js

$('input.readonly').on('click', function(evt) { 
    evt.preventDefault(); 
} 

Añadir una clase readonly al elemento que desea aparece en gris : a través de css estableces un opacity y cambias el estilo de cursor. A continuación, elimine el javascript en línea y evite la acción predeterminada para los elementos input.readonly al hacer clic en evento

+0

. Esto funcionará, pero una solución HTML pura es más fácil y preferible. No es necesario para javascript – FluffyKitten

+0

@FluffyKitten, js parte es funcionalmente idéntica al código OP, pero sin javascript en línea. – fcalderan

+0

opacidad: .50; - no funciona en IE8 – Roman

0

Modo simple, solo CSS para desactivar una casilla deshabilitada.

input[type=checkbox][disabled] { 
    filter: invert(25%); 
} 
+1

Sí, esa es una posible solución ahora (no fue cuando esto se hizo hace 5 años). Sin embargo, es importante tener en cuenta que los filtros css no son compatibles con IE11. – FluffyKitten

Cuestiones relacionadas