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

Question

目标是对复选框输入列表进行选择限制。 请参阅代码，其中包含三个复选框，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);
});

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