使用 Jquery 取消选中复选框

Question

我有一个包含复选框列表的页面，当一个复选框被选中时，我正在更新 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());
        }

    });

有什么想法吗？

Answer 1

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

Answer 2

你应该说

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

而不是

this.attr('checked', false)

Answer 3

首先，您应该在处理复选框时使用 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

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

Answer 4

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

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

使用 Jquery 取消选中复选框

Uncheck a Checkbox using Jquery

html

javascript

jquery

jquery-mobile