在Twitter Bootstrap 3按钮(复选框)仍然是灰色后，它是未检查的

In Twitter Bootstrap 3 button (checkbox) remains gray after it is unchecked

本文关键字：检查 灰色 仍然是 Bootstrap Twitter 按钮 复选框      更新时间：2023-09-26

我使用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或其他方法?

这可能与您的HTML不正确有关。如果你看一下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示例 
<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>
相关文章：