css - 如何在 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

任何具有 .disabled 的 .btn 元素都将按优先级删除其 box-shadow。您可以通过添加自己要应用的简单样式来更改它:

.btn.disabled.active{
    box-shadow: inset 0 3px 5px rgba(0,0,0,.275);
}

Bootply

更改 box-shadow 参数以满足您的需求。