3

我正在使用 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>

当我选择个人时，另一个被取消选择（应该如此），但问题是：

  • 表单启动时，它们都不是活动的
  • 我可以取消选择点击表格
4

2 回答 2

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

并在之后使用 js 进行初始化：通过 JavaScript 启用按钮：

$('.btn').button()

您可以将其中一个设为活跃，将“活跃”类添加到标签 - “btn btn-primary active”和“选中”以输入收音机。

于 2014-02-26T18:26:38.407 回答
0

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

于 2021-11-10T14:20:26.930 回答