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

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

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