How to disable a label with jQuery?

Question

How can I disable a label with jQuery? I tried:

$('#some-id').prop('disabled', true);

but it's not grayed out.

My HTML is: <label for="some-id">Label Here</label><input id="some-id"/>

Already asked on stackoverflow : http://stackoverflow.com/questions/7330541/how-can-i-change-a-labels-color-when-its-input-is-disabled — mguimard, Jul 09 '13 at 15:45
Label will not change colour automatically when you disable it. You need to define a corresponding class in your CSS. — Aleks G, Jul 09 '13 at 15:46

score 18 · Accepted Answer · answered Jul 09 '13 at 15:45

labels do not have a disable property inherently built in. You will need to add a class to disable them yourself.

Something like:

.disabled {
   color: darkgrey;
   background-color: grey;
}

And to add the class to your element:

$('#some-id').addClass('disabled');

score 6 · Answer 2 · answered Jul 09 '13 at 15:45

6

To disable a label, disable the form control it is associated with.

That won't change the appearance of the label though, for that you have to change the CSS that applies to it. That is best done by adding (or removing) a class from the element (and having a pre-existing CSS ruleset that matches that class).

answered Jul 09 '13 at 15:45

Quentin

914,110
126
1,211
1,335

This is a better answer than the accepted one, IMO. Accepted answer only makes it look disabled whereas this suggests to disable the input that the label controls and also makes it appear disabled. – Martin Geldart Nov 22 '18 at 17:26

score 1 · Answer 3 · answered Jul 09 '13 at 15:45

1

You can disable an input like this:

$("#test").attr("disabled", "disabled");

It should be noted that you can't disable a label, as it doesn't accept any input to begin with. If you want it to look disabled, you might consider just changing the color of the text to gray.

$("#test").css("color", "#666");

answered Jul 09 '13 at 15:45

James Johnson

45,496
8
73
110

2

That downvote was before your edit, and was probably because you can't disable a label using `.attr()` or anything else – Bojangles Jul 09 '13 at 15:48

score 0 · Answer 4 · answered Jul 09 '13 at 15:53

You should add a disabled class to the label when you disable the input. You could do it like this if you want to keep all the code in the same place:

$('#some-id, [for="some-id"]').prop('disabled', true).addClass('disabled');

Working JSFiddle example.

How to disable a label with jQuery?

4 Answers4