取消选择单选按钮选项

Question

我正在使用 Bootstrap单选按钮 ，希望能够允许取消选择单选组。可以通过使用额外的按钮(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”。如果我引入一个超时，类“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)
        }
    }
)

我该如何成功地切换所选选项而不使用超时？谢谢您的帮助。

- peter

---

请参见https://dev59.com/MGQn5IYBdhLWcg3wETvj。 - Chris

Chris，对于普通的单选按钮有效，但对于Bootstrap按钮无效（它们在输入周围有标签）。 - peter

Answer 1

使用return false;代替preventDefault和stopPropagation两个方法，效果相同。

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

- Deepanshu Gupta

---

这个解决方案比我的好多了。使用 return 完全忘记了。 - spaniol6

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

- spaniol6

---

preventDefault和stopPropagation - 太好了，谢谢; o) - peter

@peter 谢谢，很高兴我能帮到你！然而，Jhon Carpenter有一个比我的更好的解决方案，我认为应该被接受。 - spaniol6