Question

我的页面中有一组复选框，如果他已经选中了两个复选框，我想阻止用户选中复选框。不知何故，我解决了我的问题，但我对目前的解决方案并不满意，因为我认为不是这样做的正确方法。所以我在这里有一个更好的选择，我目前的代码在下面给出

HTML

<input type="checkbox" class="chkTest" />
<input type="checkbox" class="chkTest" />
<input type="checkbox" class="chkTest" />
<input type="checkbox" class="chkTest" />
<input type="checkbox" class="chkTest" />
<input type="checkbox" class="chkTest" />
<input type="checkbox" class="chkTest" />
<input type="checkbox" class="chkTest" />
<input type="checkbox" class="chkTest" />

脚本

    $(function () {
        var count = 0;
        $(".chkTest").change(function () {

            if ($(".chkTest").is(":checked")) {
                count = count + 1;
            }
            if (count > 2) {
                $(this).attr("checked", false);
                alert("only two");
            }

        });
    });

任何想法???

Answer 1

使用：

$(".chkTest").change(function () {
    if ($(".chkTest:checked").length > 2) {
        $(this).prop("checked", false);
    }
});

<强> jsFiddle example

Answer 2

如果您选择了2个选项，这将禁用所有未选中的框，并在您选中零个或一个时启用所有选项。

$(".chkTest").change(function () {
    if ($(".chkTest:checked").length < 2) {
        $(".chkTest").prop("disabled", false);
    } else {
       $(".chkTest:not(:checked)").prop("disabled", true); 
    }
});

Answer 3

尝试

$(function () {
    var $checks = $(".chkTest").change(function () {
        if ($checks.filter(':checked').length > 2) {
            this.checked = false;
            alert("only two");
        }
    });
});

演示：Fiddle

Answer 4

这应该有效：

 $(function () {
    var count  = $(".chkTest:checkbox:checked").length;

    $(".chkTest").click(function (e) {
        if (count > 2) {
            alert("only two");
            e.preventDefault();
            return false;
        }
    });
});

如何防止使用查询检查复选框

4 个答案: