跨越多个组的引导单选按钮组答案

【问题标题】：Bootstrap radio button group spanning multiple groups跨越多个组的引导单选按钮组
【发布时间】：2015-02-17 23:08:17
【问题描述】：

我正在将 bootstrap 3 用于我拥有的网站，该网站显示了一个带有一组使用单选按钮的选项的表单。它们分布在多行上，在使用标准无线电输入时可以正常工作。

我想改为使用按钮组。使用按钮组时，组中的活动状态正确切换，但自然不会从其他组中的按钮中删除活动状态。

我找到了答案here - 可以添加点击功能来重置另一个按钮组。这部分工作，但button('reset') 功能似乎清除了点击功能以及重置为非活动状态。

HTML：

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Line 1</label>
    <div class="col-sm-10">
      <div id="line1" class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="xyz" value="1">Option 1</label>
        <label class="btn btn-default"><input type="radio" name="xyz" value="2">Option 2</label>
        <label class="btn btn-default"><input type="radio" name="xyz" value="3">Option 3</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Line 2</label>
    <div class="col-sm-10">
      <div id="line2" class="btn-group" data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="xyz" value="4">Option 4</label>
        <label class="btn btn-default"><input type="radio" name="xyz" value="5">Option 5</label>
        <label class="btn btn-default"><input type="radio" name="xyz" value="6">Option 6</label>
      </div>
    </div>
  </div>
</form>

JQuery:

$('#line1 .btn').on('click', function(){
  $('#line2').button('reset');
});
$("#line2 .btn").on('click', function(){
  $("#line1").button('reset');
});

JSfiddle 在这里演示问题 - http://jsfiddle.net/a0bdeufm/

有人知道从这里去哪里吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

这是我的解决方案。

您可以使用 jQuery removeClass() 在按钮组的单击事件上删除类 active。

JS 代码：

$('#line1 .btn').on('click', function(){
  $('#line2 .active').removeClass('active');
});
$("#line2 .btn").on('click', function(){
  $('#line1 .active').removeClass('active');
});

这是一个有效的DEMO

【讨论】：

【解决方案2】：

我有和VSri58一样的解决方案

我本来就有

$('#line2 input:checked').prop('checked', false);

在这两个函数中，输入也被清除。

【讨论】：