Bootstrap ButtonGroup Select 1 Только кнопка

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

Для того, чтобы поддерживать активную кнопку тока вы можете делегировать событие щелчка, чтобы избежать распространения событий и кнопки изменения состояния.

Так сниппет является:

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