javascript - 取消选择单选选项

Question

我正在使用 bootstrap radio buttons并希望允许取消选择 radio 组。这可以使用一个额外的按钮来完成 (Fiddle) .但是，如果在该选项处于事件状态时单击该选项，我想取消选择该选项，而不是额外的按钮。

我试过了

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this);

        if ($(clickedLabel).hasClass("active"))
        {
            // an active option was clicked => deselect it
            $(clickedLabel).children("input:radio").prop("checked", false)
            $(clickedLabel).removeClass("active");
        }
    }
)

但似乎存在竞争条件:单击我使用的标签的事件似乎被 bootstrap.js 使用以将单击的标签选项设置为“事件”。如果我引入超时，“active”类将被成功删除:

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this);

        if ($(clickedLabel).hasClass("active"))
        {
            setTimeout(function() {
                // an active option was clicked => deselect it
                $(clickedLabel).children("input:radio").prop("checked", false)
                $(clickedLabel).removeClass("active");
            }, 500)
        }
    }
)

如何在不使用超时的情况下成功切换所选选项？感谢您的帮助。

Answer 1

Instead of using two method's preventDefault & stopPropagation, use return false, will work same.

The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or "bubbling up") the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well.

$(".btn-group label").on("click", function(e) { 

    var clickedLabel = $(this);



          if ($(clickedLabel).hasClass("active"))
            {
                // an active option was clicked => deselect it
                $(clickedLabel).children("input:radio").prop("checked", false)
                $(clickedLabel).removeClass("active");
                return false;
            }
        });