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 - ＆gt;下面是一个使用禁用和非禁用形式的复选框的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>

在Twitter中，Bootstrap 3按钮（复选框）在取消选中后仍保持灰色

1 个答案: