How can I change a <label>’s color when its input is disabled?

I have som开发者_Python百科e labels like:

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

that sometimes are disabled

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

No problem, but I would like to change label text color to make it more visible. Is it possible using Jquery and/or CSS?

---

This can be done in CSS, but only when the label comes after the input tag. For example:

HTML:

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

CSS:

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

---

you can add a css rule to the label by selecting the parent of your input and adding to that at the time you disable the control

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

---

Additionally, I think label is meant to be used like this:

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

where the label's for attribute matches the id of the target control

in which case you could select the label by it's for attribute and apply css as you see fit - something like this:

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

See fiddle for demo: http://jsfiddle.net/bq52X/

---

Yeah if you are wanting to make the disabled inputs label text a different color, then you could add a css class to the <label> tag.

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

Then you have control over the style through the stylesheet rather than in the script file or the html file.

Consider not wrapping the input inside the label tag though as i feel it gives you greater control over styles.

---

I didn't hear anyone about opacity:

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

---

One option:

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