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. (Я бы, вероятно, оставил им возможность устанавливать и снимать флажки по желанию, только с отдельным индикатором, который показывает, что у них было слишком много проверок, и тестом перед отправкой, чтобы убедиться, что их не слишком много. это то, что ты тоже делаешь.)