Question

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

enter image description here

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

我的问题是用户可能决定检查它们，然后取消选中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是可用插槽的数量。以上内容适用于页面上的所有复选框，但您可以通过选择器将其范围扩展到特定容器。

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

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

2 个答案: