twitter-bootstrap 预切换 Bootstrap 的 btn-group 中的按钮？

Pre-toggle a button in Bootstrap's btn-group?

提问by Richard

I would like to set a selected button in Bootstrap's btn-group:

我想在 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>

How can I pre-select option 5? This answer suggeststhat I can add activeclass to the button, which does indeed work initially, but then clicking on the other buttons doesn't deactivate that button, as I would expect.

如何预选选项 5？这个答案表明我可以active向按钮添加类，这在最初确实有效，但是正如我所期望的那样，单击其他按钮不会停用该按钮。

Here is a fiddle: http://bootply.com/90490

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

Here is another fiddle with the activeclass applied, showing why it isn't the correct solution: http://bootply.com/90491- click on any of the other buttons, and button 5 still remains active.

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

采纳答案by Eiríkur Fannar Torfason

Assuming that you want there to be a single selection per button group and that you have included the bootstrap JavaScript file, then the following should work.

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

Markup

标记

<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

JavaScript

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

If you want to, for example, pre-toggle the third button, you can use the slice function like so:

例如，如果你想预切换第三个按钮，你可以像这样使用 slice 功能：

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

Alternatively you could assign identifiers to the buttons.

或者，您可以为按钮分配标识符。

Here's my fiddle: http://bootply.com/90501

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

回答by Jon P Smith

I was looking for an answer to the pre-toggle a button and found this SO. They all seemed a bit difficult and I found a link to BootStrap 4 checkbox buttonswhich gave me some hints on how BootStrap 3 works. My solution is, I think, simpler as it can be pre-written in the html. The solution is below:

我正在寻找预切换按钮的答案，并找到了这个 SO。它们似乎都有点困难，我找到了一个指向BootStrap 4 复选框按钮的链接，它给了我一些关于 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>

As I say, this was prompted by BootStrap 4 docs but works on BootStrap 3. The important parts are:

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

1. The data-toggle="buttons"in the btn-groupdiv.
2. The activeclass on the label 5.
3. The checkedon the <input type="radio">for 5.

1. 将data-toggle="buttons"在btn-groupDIV。
2. 该active标签5类。
3. 在checked对<input type="radio">5。

I hope this helps others.

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

回答by Pragati Dugar

You can remove checked from input tag of first button,and add active class on condition . eg:

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

<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>