Bootstrap 3 Button Groups - html

Question

**Bootstrap 3
I'm trying to make each set of button group unique but the different groups are interfering with each other
<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>
How do i keep it unique in it's own group

Answer 1

You may want to use the Bootstrap provided radio button groups (http://getbootstrap.com/javascript/#buttons), and then use the reset method to clear the other group..
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');
});
Demo: http://bootply.com/86422

Answer 2

Click the button in the btn-group doesn't set a (active) class. The button gets a different background-color cause it is focussed (:focus). Clicking a button in a different btn-group sets the focus to this button.
Use something like this to set an active class per btn-group:
$('.btn-group button').click(function()
{
$(this).parent().children().removeClass('active');
$(this).addClass('active');
});

Answer 3

If you are using AngularJS the Angular UI bootstrap has a great solution.
Basically do the following using the btnRadio directive.
<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>

Answer 4

To keep unique button just don't use 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>
This class is used for series of buttons. Check documentation of Buttons Group

Answer 5

Just to simplify it for the next person to come looking, here's the solution code from the Bootstrap website:
<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>
Basically, you style the labels as buttons and code the options as regular radio buttons to separate one set of options from the other.