javascript - 在 Twitter Bootstrap 3 中，按钮(复选框)在取消选中后保持灰色

Question

我使用 Twitter Bootstrap 3 并有以下代码:

<div class="btn-group" id="day-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input name="fruits" id="apple" value="1" type="checkbox" />Apple
    </label>
    <label class="btn btn-default">
        <input name="fruits" id="orange" value="2" type="checkbox" />Orange
    </label>
</div>

我单击“Apple”，该按钮(复选框)呈灰色。现在已经检查完毕。

然后我再次单击“Apple”。现在是未检查状态。但它仍然是灰色的。只有当我单击其他地方时，它才会变成白色，所以我可以看到，该复选框未被选中。

我希望在取消选中白色按钮(复选框)后立即看到它，而不必单击其他地方。我怎样才能做到这一点？ jQuery、CSS 还是其他方式？

Answer 1

这可能与您的 HTML 不正确有关。如果您查看 forms 上的 Bootstrap 文档，您会看到他们使用以下内容作为输入。

<div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>

所以，修改您的以下内容

<label class="btn btn-default">
    <input name="fruits" id="orange" value="2" type="checkbox" />Orange
</label>

至此

<div class="form-group">
    <label for="orange">Orange</label>
    <input type="checkbox" class="form-control" id="orange" placeholder="Orange">
</div>

Bootstrap on form controls -> 下面是使用禁用和非禁用形式的复选框的 Bootstrap 示例

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>