在第二次单击时取消选择 bootstrap 3 单选按钮

Question

我想允许取消选择引导 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>

Answer 1

这是一个有效的fiddle。出于某种原因，您必须同时调用 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);
})