在第二次点击时取消Bootstrap 3单选按钮的选择状态。

Question

我希望能够允许取消选择bootstrap btn-group单选按钮而不需要额外的按钮。

根据this的答案，我写了jsfiddle，但对我来说它不起作用。为什么？ 通过查看日志，我发现该方法在第二次点击时被调用。

$('body').on('click', '.btn.active', function(e){
    console.log("test");
    e.stopImmediatePropagation();
    $('input:radio[name="options"]').parent().removeClass("active");
})

HTML：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked/>Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2" autocomplete="off">Radio 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3" autocomplete="off">Radio 3
    </label>
</div>

- Dejell

Answer 1

这里有一个有效的演示代码。不知何故，您需要同时调用stopPropagate和preventDefault才能使其正常工作。

$('body').on('click', '.btn.active', function(e){
    e.stopImmediatePropagation();
    e.preventDefault();
    console.log(this, $('input:radio[name="options"]', this));
    $(this).removeClass('active');
    $('input:radio[name="options"]', this).prop('checked', false);
})

- pmate

---

奇怪。你能解释一下吗？ - Dejell

e.stopImmediatePropagation() 阻止了 Bootstrap 点击事件的执行，而 e.preventDefault() 则防止单选按钮被选中。显然，选中单选按钮会导致事件冒泡并执行 Bootstrap 点击事件。 - pmate