** 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>
我如何让它在自己的组中保持独特
最佳答案
您可能想使用 Bootstrap 提供的radio button 组 ( 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');
});
关于html - Bootstrap 3 按钮组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19246156/