取消选择无线电选项

我正在使用引导单选按钮，并希望取消选择一个无线电组。 这可以使用额外的按钮（小提琴）来完成。 但是，如果在激活选项时单击该选项，我希望取消选择一个选定的无线电选项，而不是额外的按钮。

我试过这个

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

而不是使用两个方法的preventDefault和stopPropagation，使用return false，将工作相同。

区别在于返回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; } }); 

Answer 2

在jsfiddle中弄乱你的代码一段时间后，我发现preventDefault（）和stopPropagation（）的组合可以解决这个问题。

这是一个小提琴

和代码：

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