3

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

http://jsfiddle.net/EYJj8/

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

3 回答 3

3

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

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

演示

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

$(":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);
    }
});

演示

于 2013-08-22T10:44:16.423 回答
1

看这个演示

$("input:checkbox").click(function () {
    if ($("input:checkbox:checked").length >= 3) {
        $("input:checkbox:checked").not(this).first().attr("checked", false);
    }
});
于 2013-08-22T10:53:15.357 回答
0

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

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

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

这是一个小提琴

编辑

如果您想在达到限制时取消选中最后一个检查的元素，您可以执行以下操作：-

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

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

这是另一个小提琴

于 2013-08-22T10:48:37.820 回答