Question

目标是对复选框输入列表进行选择限制。查看代码有三个复选框，jquery限制选择三个中的最多两个。但我希望有限制，以便当选中两个复选框并且用户尝试单击第三个未选中的框时，这会将第一个选择更改为第三个框。

<input type="checkbox" class="check" name="check1" id="check1" >
<label class="layout" for="check1"></label>

<input type="checkbox" class="check" name="check2" id="check2" >
<label class="layout" for="check2"></label>

<input type="checkbox" class="check" name="check3" id="check3" >
<label class="layout" for="check3"></label>

$("input:checkbox").click(function() {
var bol = $("input:checkbox:checked").length >= 2;     
$("input:checkbox").not(":checked").attr("disabled",bol);
});

Answer 1

在这种情况下，您需要实现一个状态变量来跟踪检查框的顺序。这可能看起来像这样：

var checkState = [];

$("input:checkbox").click(function() {
    if($(this).is(':checked')) {
        checkState.push(this);
        if(checkState.length > 2)
            $(checkState.shift()).prop('checked',false);
    } else {
        var ix = checkState.indexOf(this);
        if(ix > -1) checkState.splice(ix,1);
    }
});

Demo

如果您不想以这种方式使用数组，则可以在检查每个复选框时添加时间戳。当你要弄清楚哪个项目首先取消选中时，它仍然会变得有点混乱：

$(":checkbox").change(function() {
    $box = $(this);
    $box.data('check-time', $box.is(':checked') ? (new Date().getTime()) : null);

    if($(':checkbox:checked').length > 2) {
        $(':checkbox:checked').sort(function(a,b) { 
            var aTime = $(a).data('check-time');
            var bTime = $(b).data('check-time');
            return aTime == bTime ? 0 : aTime < bTime ? -1 : 1;
        }).first().prop('checked', false);
    }
});

Demo

Answer 2

请参阅此demo

$("input:checkbox").click(function () {
    if ($("input:checkbox:checked").length >= 3) {
        $("input:checkbox:checked").not(this).first().attr("checked", false);
    }
});

Answer 3

当达到限制时，只需取消选中第一个checked复选框：

$checkboxes = $('input:checkbox');
$checkboxes.change(function() {
    if ($checkboxes.filter(':checked').length > 2) {
        $checkboxes.not(this).filter(':checked:first').prop('checked', false);   
    }
});

我绑定了change事件而不是click事件，因此如果通过按键检查复选框，则代码仍会被执行。

Here's a fiddle

修改

如果要在达到限制时取消选中上次检查的元素，可以执行以下操作： -

var $checkboxes = $('input:checkbox'), lastChecked; $checkboxes.change(function() { if ($checkboxes.filter(':checked').length > 2) { $(lastChecked).prop('checked', false); } if (this.checked) { lastChecked = this; } });

因此，当选中复选框并且已达到限制时，将取消选中之前选中的复选框。

Here's another fiddle

限制复选框选择并将选择移动到第一个选项

3 个答案:

Here's a fiddle

Here's another fiddle