Question

我想在Bootstrap的btn-group中设置一个选定的按钮：

<div class="btn-toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
  <button type="button" class="btn btn-default">7</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">8</button>
 </div>
</div>

如何预先选择选项5？ This answer suggests我可以将active类添加到按钮中，这确实最初有效，但是点击其他按钮并不会停用该按钮，正如我所料。

这是一个小提琴：http://bootply.com/90490

这是应用了active类的另一个小提琴，显示了为什么它不是正确的解决方案：http://bootply.com/90491 - 点击任何其他按钮，按钮5仍然保持活动状态。

Answer 1

假设您希望每个按钮组有一个选择，并且您已经包含了引导程序JavaScript文件，那么以下内容应该可以正常工作。

标记

<div class="btn-toolbar">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
        <label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
    </div>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
    </div>
</div>

的JavaScript

$(document).ready(function() {
    $(".btn").first().button("toggle");
});

例如，如果您想要预先切换第三个按钮，可以使用切片功能，如下所示：

$(".btn").slice(2,3).button("toggle");

或者，您可以为按钮指定标识符。

这是我的小提琴：http://bootply.com/90501

Answer 2

我正在寻找预切换按钮的答案并找到了这个SO。它们似乎都有点困难，我找到了BootStrap 4 checkbox buttons的链接，这给了我一些关于BootStrap 3如何工作的提示。我认为，我的解决方案更简单，因为它可以在html中预先编写。解决方案如下：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" checked>5
    </label>
    <label class="btn btn-default">
        <input type="radio">6
    </label>
    <label class="btn btn-default">
        <input type="radio">7
    </label>
</div>

正如我所说，这是由BootStrap 4文档提示的，但适用于BootStrap 3.重要的部分是：

data-toggle="buttons" div。{/ li>中的btn-group
标签5上的active课程。
checked上的<input type="radio">为5。

我希望这有助于其他人。

Answer 3

您可以从第一个按钮的输入标签中删除选中的复选框，并在条件上添加活动类。例如：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary" [ngClass]="{'active': splitOption=='equal'}" >
      <input type="radio" name="options" id="option1" autocomplete="off"  > =
     </label>
</div>

在Bootstrap btn-group中预先切换按钮？

3 个答案:

标记

的JavaScript