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>

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);
})

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

1 个答案: