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

Question

我有一个跟踪表演艺术中心志愿者的系统。当他们报名轮班工作时，他们也可以报名一个伙伴（或多个伙伴）。如果我们有太多的注册，还有一个等待名单。选择好友的表格如下所示：

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

我的问题是用户可能决定同时选中它们，然后取消选中 John 而不是 Jane，这应该会使 Jane 再次变黑。

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

$("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 是可用插槽的数量。以上适用于页面上的 all 复选框，但您可以通过选择器轻松地将其范围限定为特定容器。

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