取消选择单选选项

我正在使用引导单选按钮 http://getbootstrap.com/javascript/#buttons并希望允许取消选择无线电组。这可以使用额外的按钮来完成(Fiddle) http://jsfiddle.net/norlihazmeyGhazali/94ae9j0e/。但是，如果在选项处于活动状态时单击该选项，我想取消选择选定的单选选项，而不是额外的按钮。

我试过这个

$(".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)
        }
    }
)

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

使用 return false 而不是使用 PreventDefault 和 stopPropagation 这两种方法，效果相同。

区别在于返回false；更进一步 它还可以防止该事件传播（或“冒泡”） DOM。你可能不知道的是，每当发生事件时 发生在一个元素上，该事件在每个父元素上触发 元素也是如此。

$(".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;
            }
        });