跨越多個組的Bootstrap單選按鈕組

我爲使用單選按鈕的一組選項顯示錶單的表單使用了引導程序3。它們分佈在多條線路上，使用標準無線電輸入時工作良好。跨越多個組的Bootstrap單選按鈕組

我想轉換爲使用按鈕組。使用按鈕組時，活動狀態在組中正確切換，但自然不會從另一組中的按鈕移除活動狀態。

我找到了答案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/

任何人有任何想法從哪裏走？

來源

2014-12-19 Andrew Clay

這是我的解決方案。

您可以使用jQuery removeClass()在按鈕組的單擊事件中刪除類active。

JS代碼：

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

這裏是一個工作DEMO

來源

2014-12-19 02:46:26 VSri58

我有同樣的解決方案VSri58

我只想有

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

在這兩個函數中，輸入都清除了。

來源

2014-12-19 02:52:20 Yveah

跨越多個組的Bootstrap單選按鈕組

回答

相關問題