使用Jquery取消选中复选框

Question

我有一个页面上有一组复选框，当用户勾选一个复选框时，我会在一个p标签中更新所选复选框的数量。这一切都正常工作。

问题在于，当用户选择超过5个复选框时，我想使用jQuery取消选择。

目前为止，我已经写了以下代码，第一个if else语句可以正常工作，但是if语句的第一部分却不能正常工作。

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

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

    });

有什么想法吗？

- Ayo Adesina

---

你能同时发布HTML吗？ - R4nc1d

这个不行！！this.attr('checked', false) - Rajaprabhu Aravindasamy

你应该使用 length 而不是 size()。 - epascarello

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

示例代码

请注意，我将示例代码限制为两个选择项，以便更容易测试。

- Rory McCrossan

---

我不知道是不是只有我这样，但是当使用空格键选中一个复选框时，“click”事件也会被触发。 - Michael K

我相信这是在较新的浏览器中的行为，但您仍应使用 change() 来确保在所有浏览器上兼容。 - Rory McCrossan

我想可能就是这样，明白了。 - Michael K

Answer 2

你应该说

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

代替

this.attr('checked', false)

- Mritunjay

Answer 3

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

- renakre

Answer 4

你需要这个 $(this).prop('checked', false); 此外，this 是一个 JavaScript 对象，如果你想使用 jQuery，你应该优先选择 $(this)。

- renakre