在 Bootstrap 中禁用复选框标签并将其变灰

Posted 2023-05-08

【中文标题】在 Bootstrap 中禁用复选框标签并将其变灰

【英文标题】：Disable and gray out a checkbox label in Bootstrap

【发布时间】：2014-05-12 05:25:30

【问题描述】：

有没有办法在使用 Bootstrap 和 Jquery 禁用复选框后禁用复选框标签并将其变灰？

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

我现在使用下面的代码来禁用复选框：

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

【参考方案1】：

您只能使用 CSS 来做到这一点

$("#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>

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

Attribute selectors in CSS

【讨论】：

对于像我这样不知道 + 做什么并且想知道为什么它不起作用的每个人。标签元素需要直接在输入元素之后（而不是之前）。

如果标签在复选框之前，css 会受到怎样的影响？

【参考方案2】：

似乎在 div“类”以及输入中设置单词 disabled 就可以了。

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

【参考方案3】：

Bootstrap 不提供此类工具，您可以通过 jQuery 自定义代码进行管理

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

【参考方案4】：

尝试使用：

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

【讨论】：

这不会改变 Bootstrap 3 中的标签。

【参考方案5】：

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

作为按钮禁用

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

【讨论】：

这两个建议都对 Bootstrap 3 中的标签没有任何作用。