jQuery - 记录复选框点击的顺序

Question

我有一个系统正在跟踪表演艺术中心的志愿者。当他们报名轮班工作时，他们还可以报名一个（或多个）伙伴。如果报名人数过多，也会有等候名单。选择好友的表格看起来像这样：

如果等待名单上只剩下一个位置，我需要如果选择了下一个人的名字，则将其变成红色（因此选择了约翰，但当选中简时，她会变成红色以作为警告）。

我的问题是，用户可能决定同时选中它们，然后取消选中约翰而不是简，这会让简再次变黑。

有没有一种简单的方法可以使用类似的方法来跟踪点击：

$("input:checkbox").change(function(){

    $("input:checked").each(function(i){

       //object/array manipulation?

    });

});

我使用元素的索引可以正常工作，但意识到这是行不通的，因为它会跟踪首先检查复选框的顺序。

即使方向正确，也会令人惊奇。我意识到我没有付出太多来继续下去。

谢谢，

杰森

Answer 1

很好的挑战。您可以这样做：

var limit = 4;  //Maximum checked allowed, for example 4
var checkedOrder = []; //Priority queue (stores checking order)
$("input:checkbox").change(function(){
    var nCurrentlyChecked = $("input:checkbox:checked").length; // EDIT: How many are currently checked?
    if($(this).is(":checked")){ //If checkbox is checked
        checkedOrder.unshift(this); //Insert to the begining of the array (push to the queue)
        if(nCurrentlyChecked > limit) //If more than allowed
            $(this).next().css('backgroundColor', 'red'); //Turn element red
    }else{ //If checkbox is unchecked
        $(this).next().css('backgroundColor', 'black'); //Always blacken unchecked checkbox
        var nTurnedBlack = 0;
        //Now, we blacken checkboxes by priority
        for(var i=0; i<checkedOrder.length && nTurnedBlack <= limit; i++){           
           var checkbox = checkedOrder[i];
           if(checkbox == this) continue; //Ignore currently unchecked checkbox
           $(checkbox).next().css('backgroundColor', 'black'); 
           nTurnedBlack++;
        }
    }
});

如您所见，它“优先”将首先检查的复选框变黑。这不是经过测试的代码，可能有错误，但我希望它能指导您找到最终的解决方案

Answer 2

您可以轻松计算选中的复选框的数量：

$("input:checkbox").change(function(){
    if ($("input:checkbox:checked").length >= maxSlotsAvailable) {
        // Make your remaining ones red, be sure that no newly-checked
        // ones are red
        $("input:checkbox:not(:checked)").addClass("maxedOutWarning");
        $("input:checkbox:checked").removeClass("maxedOutWarning");
    }
    else {
        // Make sure they're all black
        $("input:checkbox").removeClass("maxedOutWarning");
    }
});

...其中 maxSlotsAvailable 是可用插槽的数量。上面的内容适用于页面上的所有复选框，但您可以通过选择器轻松地将其范围限定到特定容器。

上面的内容允许这样的想法：即使所有插槽都已填满，用户也可以继续选中复选框；如果您要阻止这种情况，则可以删除 if 的 true 子句的第二行。 （我可能会让他们能够随意选中和取消选中复选框，只是用一个单独的指示器来显示他们选中的复选框太多，并进行预提交测试以确保没有太多。我认为听起来这也是你正在做的事情。）