我怎样才能在 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 参数以满足您的需要。