Bootstrap 按钮组 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>

当我 select 一个按钮，然后 select 另一个按钮时，第一个按钮不会被删除select。我尝试用 JQuery 去除 select 但它不起作用：

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

如何确保我只保留一个 selected？我的 objective 是有一个按钮 selected 以便我可以使用它。像这样：

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

Bootstrap 按钮组 Select 仅 1 个按钮

Bootstrap ButtonGroup Select 1 Button Only

jquery

buttongroup

twitter-bootstrap-3