使用 Jquery 取消选中复选框答案

【问题标题】：Uncheck a Checkbox using Jquery使用 Jquery 取消选中复选框
【发布时间】：2015-04-20 22:35:35
【问题描述】：

我有一个带有复选框列表的页面，当一个复选框被选中时，我正在更新 p 标签中选中的复选框的数量。这一切正常。

我遇到的问题是当用户选择超过 5 个复选框时，我想使用 Jquery 取消选择它。

这是我目前所拥有的，第一个 if else 有效，但 if doe 的第一部分

 $("input").click(function () {

        if ($("input:checked").size() > 5) {
            this.attr('checked', false) // Unchecks it
        }
        else {
            $("#numberOfSelectedOptions").html("Selected: " + $("input:checked").size());
        }

    });

有什么想法吗？

【问题讨论】：

能把html也发一下吗？
this.attr('checked', false) 这不行！！
你应该使用length而不是size()

标签： javascript jquery html jquery-mobile

【解决方案1】：

首先，您应该在处理复选框时使用change 事件，以便它满足仅通过键盘导航的用户。其次，如果选中复选框的数量已经是 5 个或更多，您可以使用 preventDefault() 停止选择当前复选框。试试这个：

$("input").change(function (e) {
    var $inputs = $('input:checked');
    if ($inputs.length > 5 && this.checked) {
        this.checked = false;
        e.preventDefault();
    } else {
        $("#numberOfSelectedOptions").html("Selected: " + $inputs.length);
    }
});

Example fiddle

请注意，我将小提琴限制为 2 个选择，以便更容易测试。

【讨论】：

我不知道是不是只有我，但是当空格键用于选中一个框时会触发“点击”。
我相信这是新浏览器中的行为，但您仍应使用change() 以确保对所有浏览器的兼容性。
我认为它可能是这样的，明白了。

【解决方案2】：

你需要这个$(this).prop('checked', false);

【讨论】：

【解决方案3】：

你应该说

$(this).attr('checked', false)

而不是

this.attr('checked', false)

【讨论】：

【解决方案4】：

你需要这个$(this).prop('checked', false);

另外this是一个javascript对象，如果你想使用jquery你应该更喜欢$(this)。

【讨论】：