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

Question

I have some 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?

Answer 1

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* } ;