Question

我正在使用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');
});

JS这里用来演示问题 - http://jsfiddle.net/a0bdeufm/

任何人都有任何想法从哪里开始？

Answer 1

这是我的解决方案。

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

JS代码：

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

这是一个有效的 DEMO

Answer 2

我有与VSri58相同的解决方案

我就是

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

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

Bootstrap单选按钮组跨越多个组

2 个答案: