Question

我有一个包含复选框列表的页面，当选中复选框时，我正在更新在p标签旁边选中的复选框的数量。这一切都有效。

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

这就是我到目前为止，第一个if if的工作，但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

首先，您应该在处理复选框时使用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个选项，以便更容易测试。

Answer 2

您需要$(this).prop('checked', false);

Answer 3

你应该说

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

而不是

this.attr('checked', false)

Answer 4

您需要$(this).prop('checked', false);

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

使用Jquery取消选中复选框

4 个答案: