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);

Answer 1

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

Answer 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>