Question

我正在使用bootstrap radio buttons，并希望取消选择广播组。这可以使用额外的按钮(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

而不是使用两种方法的preventDefault＆amp; 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（）的组合可以解决问题。

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

取消选择无线电选项

2 个答案: