取消选择单选选项

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 似乎使用单击我使用的标签的事件将单击的标签选项设置为“活动”。如果我引入超时，则“活动”类被成功删除：

$(".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，效果相同。

不同的是return 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();
        }
    }
);