CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Andrew Clay
Andrew Clay

Reputation: 33

Bootstrap radio button group spanning multiple groups

I am using bootstrap 3 for a site I have which shows a form with a set of options using radio buttons. They are spread over multiple lines, which works fine when using standard radio inputs.

I want to convert to using button groups instead. When using button groups, the active state switches correctly in the group, but naturally does not remove the active state from buttons in the other group.

I found an answer here - with a way to add a click function to reset another button group. This works partially, but the button('reset') function appears to clear the click function as well as reset to non-active state.

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 here to demonstrate the problem - http://jsfiddle.net/a0bdeufm/

Anyone got any ideas where to go from here?

Upvotes: 3

Views: 2085

Answers (2)

VSri58
VSri58

Reputation: 3761

Here is my solution.

You can use jQuery removeClass() to remove the class active on click event of the button group.

JS Code:

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

Here is a working DEMO

Upvotes: 2

Yveah
Yveah

Reputation: 23

I had the same solution as VSri58

I would just had 

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

In both functions just so the input clears too.

Upvotes: 0

Related Questions