在bootstrap 3中禁用单选按钮？

Question

如何禁用Bootstrap 3单选按钮？如果我从BS3示例开始并添加disabled="disabled"到每个输入元素,则外观或行为没有变化:

<div class="container">
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked disabled="disabled">Radio 1 (preselected)</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off" disabled="disabled">Radio 2</label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off" disabled="disabled">Radio 3</label>
</div>

演示:JSFiddle.

我想这是因为disabled属性仅应用于now-invisible按钮而不是可点击的文本标签,但我在BS3文档中没有看到任何关于此的内容.

Answer 1

disabled像这样在标签上添加类

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary active disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary disabled">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

这是一个演示

Answer 2

正如@giammin在对已接受答案的评论中所提到的,在输入元素上设置'disabled'在引导程序的3.3.6中不起作用.(本答复公布时的当前版本).

我有完全相同的问题,我的解决方案是使用CSS属性" 指针事件 ".这可以确保元素和子元素永远不会成为单击事件的目标.然而,这不是一个万无一失的解决方案 - 用户仍然可以选中并使用空间来点击桌面浏览器上的隐藏元素.

.disabled-group
{
    pointer-events: none;
}

如果你在' .btn-group '元素上设置它,你将完全禁用

<div class="btn-group disabled-group" data-toggle="buttons">
   <label class="btn btn-primary disabled">
      <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
   </label>
   <label class="btn btn-primary disabled">
      <input type="checkbox" autocomplete="off"> Checkbox 2
   </label>
   <label class="btn btn-primary disabled">
     <input type="checkbox" autocomplete="off"> Checkbox 3
   </label>
</div>

然后' .disabled '类是可选的 - 用它来显示灰色和'cursor:not-allowed;' 属性.

修复解决方案的讨论来源于:https: //github.com/twbs/bootstrap/issues/16703

Answer 3

对于单选按钮组，将禁用的类添加到希望禁用的类中。确保您有类似以下代码的内容：

$('.btn-group').on("click", ".disabled", function(event) {
    event.preventDefault();
    return false;
});

这将使您在按钮组内的所有.disabled分类按钮也被禁用。这也适用于单选按钮组。