我正在使用 bootstrap radio buttons并希望允许取消选择 radio 组。这可以使用一个额外的按钮来完成 (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)
}
}
)
如何在不使用超时的情况下成功切换所选选项?感谢您的帮助。
最佳答案
Instead of using two method's preventDefault & stopPropagation, use return false, will work same.
The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or "bubbling up") the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well.
$(".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;
}
});
关于javascript - 取消选择单选选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33895493/