如何让按钮组像单选按钮组一样工作？

Question

我正在使用Bootstrap 3，希望将两个按钮设置为单选按钮，但是我不知道怎么做。以下是我的代码：

<div class="btn-group" >
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            PERSONAL
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            COMPANY
        </button>
    </div>
</div>

当我选择“个人”时，另一个选项会被取消选择（这是应该的），但问题是：

• 表单启动时，它们都没有激活
• 我可以通过在表单外单击来取消选择它们两个

- Felipe Carminati

Answer 1

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

在之后使用javascript进行初始化： 使用JavaScript启用按钮：

$('.btn').button()

您可以通过将"active"类添加到标签 - "btn btn-primary active"，以及将"checked"添加到输入单选按钮来激活其中一个。

- Evgeniy Kiselyov

---

http://getbootstrap.com/javascript/#buttons - Evgeniy Kiselyov

Answer 2

我认为现在有更好的解决方案，根据Bootstrap文档：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

- pbur