Bootstrap 3 按钮组

Question

Bootstrap 3 按钮组

htmltwitter-bootstraptwitter-bootstrap-3

13

**Bootstrap 3

我试图让每组按钮具有唯一性，但不同的组正在相互干扰。

<label>Payment Mode</label>
<div class="btn-group">
  <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
  <button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>

<label>Payment Period</label>
<div class="btn-group">
  <button type="button" class="btn btn-default">Immediate</button>
  <button type="button" class="btn btn-default"> More Than 1 day</button>
</div>

如何在其所属的组中保持其唯一性

- CodeGuru

定义相互干扰 - Kippie

当我点击付款方式按钮，然后再点击付款期间按钮时，付款方式会被取消选择。 - CodeGuru

使用name字段吗？HTML中的单选按钮会取消选择具有相同“name”的任何内容。 - Vineet Menon

5个回答

4

点击btn-group中的按钮不会设置（激活）class。该按钮因为聚焦(:focus)而得到了不同的背景颜色。单击不同btn-group中的按钮会将焦点设置到此按钮。

使用以下代码来设置每个btn-group的激活class：

$('.btn-group button').click(function()
{
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
});

- Bass Jobsen

0

如果您正在使用AngularJS，Angular UI bootstrap提供了一个很好的解决方案。

基本上，使用btnRadio指令执行以下操作。

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

- Ty Danielson

-1

为了让下一个查找此问题的人更容易理解，这里是来自Bootstrap网站的解决方案代码：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

基本上，您可以将标签样式设置为按钮，并将选项编码为常规单选按钮，以将一组选项与另一组选项分开。

- Pete Considine

1

用户没有使用单选按钮。这使得答案完全无用。例如，如果您尝试使用对齐的按钮组，则无效。 - Pere

如何设置一个具有互斥选项的表单组？我认为这就是单选按钮的作用 - 您只能选择其中之一。 - Pete Considine

是的，这就是单选按钮的作用。但用户没有使用单选按钮。您也可以通过选项列表实现相同的结果，但我怀疑对于这个用户来说几乎没有用处。 - Pere

哦。我的假设是，即使他目前没有使用单选按钮，那也将是他想要的功能方式。无论如何，我仍然会留下我的回复，因为我仍然认为这是一个合理的假设。 - Pete Considine

-1

为了保持独特的按钮，不要使用“class =” btn-group“：”。

<label>Payment Mode</label>
 <div>
    <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
    <button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
 </div>

 <label>Payment Period</label>
 <div>
      <button type="button" class="btn btn-default">Immediate</button>
     <button type="button" class="btn btn-default"> More Than 1 day</button>
 </div>

这个类用于一系列的按钮。请查看按钮组的文档。

- Norbert Pisz

我似乎找不到更多的那些类 http://paste.laravel.com/XkQ 我的完整源代码。提前感谢 :x - CodeGuru

实际上，文档中的分组彼此冲突。 - CodeGuru

1

这完全是错误的。移除 btn-group 类并不能解决问题（所有按钮，无论它们属于哪个组，都会相互干扰，也就是说，每个按钮都表现为属于同一组），而且还会破坏按钮的样式。请不要编造无用的“答案”。 - Pere

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

你可能想使用Bootstrap提供的单选按钮组（http://getbootstrap.com/javascript/#buttons），然后使用reset方法来清除其他组。

HTML：

<label>Payment Mode</label>
  <div id="mode-group" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="mode" id="option1"> Cash / Cheque / Bank Transfer
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="mode" id="option2"> JobsBuddy Disbursement
    </label>
  </div>

  <label>Payment Period</label>
  <div id="period-group" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
      <input type="radio" name="period" id="period1"> Immediate
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="period" id="period2"> More Than 1 day
    </label>
  </div>

jQuery：

// unselect period when mode is selected
$("#mode-group .btn").on('click',function(){

  $("#period-group").button('reset');

});

演示: http://bootply.com/86422