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

【问题标题】：Pre-toggle a button in Bootstrap's btn-group?在 Bootstrap btn-group 中预切换按钮？
【发布时间】：2020-05-25 03:51:27
【问题描述】：

我想在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 仍然保持活动状态。

【问题讨论】：

stackoverflow.com/questions/9551628/… 的潜在欺骗
您希望在多个按钮组中选择一个选项，还是每个按钮组选择一个选项？
@JonathanBates 我在我的问题中链接到该问题，并解释为什么接受的解决方案对我不起作用。所以不是骗子。

标签： twitter-bootstrap

【解决方案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

【讨论】：

注意：您也可以在您希望默认选择的任何输入上使用checked="checked" 属性。包装器标签也必须标记为.active，以便 CSS 正确。

【解决方案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。重要的部分是：

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

我希望这对其他人有所帮助。

【讨论】：

【解决方案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>

【讨论】：