Javascript 取消选择单选选项

我正在使用，希望允许取消选择广播组。这可以使用一个额外的按钮来完成。但是，如果在选项处于活动状态时单击该选项，我希望取消选择该选项，而不是额外的按钮

我试过这个

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

---

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

在JSFIDLE中处理了一会儿代码后，我发现preventDefault（）和StopperPropagation（）的组合可以解决这个问题

这里有一个

以及守则：

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

---

与使用两个方法的preventDefault和stopPropagation不同，使用returnfalse将起到相同的作用

区别在于返回值为false；让事情更进一步 它还防止该事件传播（或“冒泡”） 大教堂。你可能不知道这一点是什么时候 发生在一个元素上，该事件在每个父元素上触发 元素

---

参见Chris，这适用于常规单选按钮，而不是引导按钮（它们在输入周围有一个标签）；o） @peter谢谢，很高兴我能帮忙！然而，约翰·卡彭特有一个比我更好的解决方案，我认为应该被接受。这个解决方案比我的好得多。我完全忘记了使用return。

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