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

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/