15

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?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Ivan
  • 14,692
  • 17
  • 59
  • 96

5 Answers5

14

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* } ;
Dag Sondre Hansen
  • 2,449
  • 20
  • 22
10

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/

Billy Moon
  • 57,113
  • 24
  • 136
  • 237
  • 1
    It’s fine having the `` inside the ` – Paul D. Waite Sep 07 '11 at 08:32
  • 4
    @PaulD.Waite: Sorry, but that's incorrect. Using `input` inside `label` tags means you _don't_ need to specify `for` attributes and is actually the preferred way to specify clickable labels. See [this post](http://stackoverflow.com/questions/6293588/how-to-create-an-html-checkbox-with-a-clickable-label/6293626#6293626) for a detailed explanation. – Amos M. Carpenter May 23 '13 at 01:10
  • Well every day is a school day. I did not know you could forgo the `for` attribute. – Billy Moon May 23 '13 at 08:15
  • @aaamons: I agree that [the spec](http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element) doesn't require the `for` attribute on a ` – Paul D. Waite May 23 '13 at 09:19
  • Having the input inside the label is the only way I've found in order to have the text of label clickable and not only the checkbox input. Feel free to post any other code that will do this: "Be able to click on label text to change the checkbox from check/uncheck" without JS/CSS – Adrian P. Oct 10 '14 at 16:35
  • In case people want to see `label` with nested `input` and `label` using `for` to target `input`'s `id` you can see it all here: http://jsfiddle.net/ucqy8mnv/ – Billy Moon Oct 10 '14 at 21:20
  • Either way (implicit wrapping without the `for` attribute, or explicit with the `for` attribute) are fine. Both are accessible and both allow clicking on the label to select the control. The explicit association is more flexible WRT layout (for instance if you want the labels above the inputs). You'd have to add a `span` to achieve that when the label is wrapped. – steveax Nov 01 '14 at 18:47
2

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.

Tim B James
  • 20,084
  • 4
  • 73
  • 103
1

I didn't hear anyone about opacity:

.css('opacity', '0.5');
tirenweb
  • 30,963
  • 73
  • 183
  • 303
0

One option:

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