Disable and gray out a checkbox label in Bootstrap

Question

Is there a way to disable and gray out the checkbox label as well once the checkbox becomes disabled using Bootstrap and Jquery?

<div class="checkbox">        
    <input id="accept" name="accept" type="checkbox" value="True">
    <label for="accept" class="control-label">Incremental</label>
</div>

I am now using the bellow code to disable the checkbox:

 $("#accept").prop("disabled", true);

score 25 · Accepted Answer · edited Oct 02 '19 at 18:20

25

You can do it with CSS only

$("#accept").prop("disabled", true);

input[type=checkbox][disabled] + label {
    color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox">
    <input id="accept" name="accept" type="checkbox" value="True">
    <label for="accept" class="control-label">Incremental</label>
</div>

Read http://css-tricks.com/almanac/selectors/c/checked/

Attribute selectors in CSS

edited Oct 02 '19 at 18:20

dota2pro

6,421
7
34
68

answered Apr 01 '14 at 12:33

Tushar Gupta - curioustushar

56,454
22
99
107

5

For everyone like me that have no idea what the + does and wondering why it is not working. The label element needs to be directly after the input element (not before). – Kristjan Liiva Nov 25 '15 at 11:49
And how is the css impacted if teh label is before the checkbox? – Chad Aug 22 '16 at 20:05

score 2 · Answer 2 · answered Aug 02 '17 at 20:07

2

Seems that setting the word disabled in the div "class" as well as in the input will do it.

<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>check Me</label>
</div>

answered Aug 02 '17 at 20:07

reddragon72

191
2
16

score 1 · Answer 3 · answered Apr 01 '14 at 12:33

1

Bootstrap dose not provide such type facility, you can manage from your jQuery custom code

if($("#accept").has("[disabled]")){
  $("#accept").parent().find("label").css("color", "#dadada");
}

answered Apr 01 '14 at 12:33

Girish

11,607
3
35
49

score -2 · Answer 4 · answered Apr 01 '14 at 12:33

-2

Try using:

$("#accept").addClass("disabled");

answered Apr 01 '14 at 12:33

Venom

321
2
4

This doesn't change the label at all in Bootstrap 3. – rodrigo-silveira Sep 08 '15 at 19:50

score -2 · Answer 5 · answered Apr 01 '14 at 12:37

-2

  $('label.control-label').addClass('disabled');

to disable as a button

 $('label.control-label').addClass('btn-disabled');

answered Apr 01 '14 at 12:37

Bellash

6,659
6
45
82

Both suggestion do nothing to the label in Bootstrap 3. – rodrigo-silveira Sep 08 '15 at 19:51

Disable and gray out a checkbox label in Bootstrap

5 Answers5