ブートストラップボタングループ選択1ボタンのみ

Question

私はBoostrap 3.3.7を使用しており、ボタンを「ラジオボタン」として使用しようとしています。

これはHTMLです：

<div id="selector" class="btn-group" data-toggle="buttons-radio"> 
    <button name="resolution" class="btn btn-default btn-sm"> 
     720 
    </button> 
    <button name="resolution" class="btn btn-default btn-sm"> 
     480 
    </button> 
    <button name="resolution" class="btn btn-default btn-sm"> 
     360 
    </button>  
</div> 

私は1つのボタンを選択すると、その後、別のものを選択し、最初の選択が解除されません。私はjQueryを使って選択を解除しようとしたが、それはうまくいきませんでした：

$('.btn-group > .btn').removeClass('active')  
$('.btn-group > .btn').eq(0).addClass('active') 

は、どのように私は私が唯一の選択された1つを維持することを確認することができますか？私の目的は、1つのボタンを選択して使用できるようにすることです。

$("#submitButton").click(function() { 
         alert($('.btn-group > .btn.active').text()); 
        }); 

Answer 1

アクティブな現在のボタンを維持するために、イベントの伝播を避けるためにclickイベントを委任し、ボタンの状態を変更することができます。

だから抜粋です：

$(document).on('click', '[name="resolution"]', function(e) { 
 
    e.stopPropagation(); 
 
    
 
    // add class active to current button and remove it from the siblings 
 
    $(this).toggleClass('active') 
 
     .siblings().not(this).removeClass('active'); 
 
}) 
 

 

 
// for test purposes 
 
$(function() { 
 
    $('#myBtn').on('click', function(e) { 
 
    console.log('Active button: ' + $('.btn-group > .btn.active').text()); 
 
    }) 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="selector" class="btn-group" data-toggle="buttons-radio"> 
 
    <button name="resolution" class="btn btn-default btn-sm"> 
 
     720 
 
    </button> 
 
    <button name="resolution" class="btn btn-default btn-sm"> 
 
     480 
 
    </button> 
 
    <button name="resolution" class="btn btn-default btn-sm"> 
 
     360 
 
    </button> 
 
</div> 
 
<button id="myBtn" class="btn">Click Me To debug</button>