Bootstrap ButtonGroup Select 1 Button Only

Question

我正在使用Boostrap 3.3.7，并试图将按钮用作'Radio Button'。

这是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> 

当我选择一个按钮，然后选择另外一个，第一个没有得到取消。我试图用JQuery取消选择它，但它不起作用：

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

如何确保我只保留一个被选中？我的目标是选择一个按钮，以便我可以使用它。类似这样的：

$("#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>