如何在Bootstrap中具有视觉上活动（已选中），禁用的切换​​按钮？

Question

Bootply

我有一个data-toggle复选框组，其中我想要检查一个（或多个）选项但已禁用。

是否有内置的视觉风格，还是需要自定义CSS？这似乎不起作用：

<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-primary  disabled">
    <input class="form-control" name="beard" value="fluffy" disabled="" type="checkbox"> Fluffy
  </label>

  <label class="btn btn-primary  disabled">
    <input class="form-control" name="beard" value="scraggly" disabled="" type="checkbox"> Scraggly
  </label>

  <label class="btn btn-primary  active disabled">
    <input class="form-control" name="beard" value="pointy" disabled="" checked="" type="checkbox"> Pointy
  </label>

</div>

从功能上来说，我认为最后一个选项已被选中，但在视觉上看起来与禁用的选项没有什么不同。

是的，我正在寻找样式为按钮的复选框（如Bootstrap所做）。必须避免使用任何额外的JS。

Answer 1

.btn个.disabled元素将box-shadow按优先顺序删除.btn.disabled.active{ box-shadow: inset 0 3px 5px rgba(0,0,0,.275); } 。您可以通过添加自己应用的简单样式来更改它：

box-shadow

Bootply

更改{{1}}参数以满足您的需求。