Disable and gray out a checkbox label in Bootstrap

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


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

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>