¿Cómo puedo cambiar el color de <label> cuando su entrada está deshabilitada?

Question

Tengo algunas etiquetas como:

<label> 
    <input type="checkbox" name="the_name" id="the_name" /> Label text 
    </label> 

que a veces son discapacitados

$("#the_name").prop('disabled', true); 

No hay problema, pero me gustaría cambiar el color del texto de etiqueta para que sea más visible. ¿Es posible usar Jquery y/o CSS?

Answer 1

puede agregar una regla CSS para la etiqueta seleccionando el padre de su entrada y añadiendo a que en el momento de deshabilitar el control

$("#the_name").prop('disabled', true).parent().css({backgroundColor:'#fcc'}); 

---

Además, creo que la etiqueta está destinado a ser utilizado como esto:

<label for="the_id">Label text</label> 
<input type="checkbox" name="the_name" id="the_id" /> 

donde el atributo de la etiqueta for coincide con el id de control de destino

en cuyo caso podría seleccionar la etiqueta de que es for atributo y aplicar css como mejor le parezca - algo como esto:

$("#the_id").prop('disabled', true); 
$('label[for=the_id]').css({backgroundColor:'#fcc'}); 

Ver violín de demostración: http://jsfiddle.net/bq52X/

Answer 2

Sí, si usted está deseando hacer que el texto de la etiqueta de entradas inhabilitadas sea de un color diferente, entonces podría agregar una clase css a la etiqueta <label>.

$("#the_name").prop('disabled', true).parent('label').addClass('disabled-label'); 

entonces usted tiene control sobre el estilo a través de la hoja de estilo en lugar de en el archivo de secuencia de comandos o el archivo html.

Considere no envolver la entrada dentro de la etiqueta aunque creo que le da un mayor control sobre los estilos.

Answer 3

Una opción:

$("#the_name").parent('label').css('color','silver'); 

Answer 4

Esto se puede hacer en CSS, pero sólo cuando la etiqueta se produce después de la etiqueta de entrada. Por ejemplo:

HTML:

<input id="someinput" type="text" /><label for="someinput">Type text:</label> 

CSS:

input[disabled] + label { *whatever style you want when input is disabled* } ; 

Answer 5

no oí a nadie sobre la opacidad:

.css('opacity', '0.5');