jQuery - Logging order of checkbox clicks

I have a system that is tracking volunteers for a performing arts center. When they sign up to work a shift they can also sign up a buddy (or buddies). There's also a waiting list if we have too many sign-ups. The form looks like so for selecting buddies:

If the waiting list only has one position left on it I need to turn the next person's name red if they are selected (so John is selected, but when Jane is checked she turns re开发者_JS百科d to serve as a warning).

My problem is that the user might decide to check them both, then uncheck John instead of Jane, which should then make Jane turn black again.

Is there an easy way to track clicks using something like:

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

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

       //object/array manipulation?

    });

});

I had it working okay using the index of the element but realized that wouldn't work since it would keep track of the order in which the checkboxes were checked in the first place.

Even a point in the right direction would be amazing. I realize I haven't given much to go on.

Thanks,

Jason

Nice challenge. You could do this:

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++;
        }
    }
});

As you can see, it has a 'preference' to blacken checkboxes that have been checked first. This is not tested code, and may have errors, but i hope it guides you to your final solution

You can readily count the number of checked checkboxes:

$("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");
    }
});

...where maxSlotsAvailable is the number of available slots. The above works on all checkboxes on the page, but you can readily scope that to a particular container via the selectors.

The above allows for the idea that the user can keep checking checkboxes even when all the slots are filled; if you're preventing that then you can remove the second line of the true clause of the if. (I'd probably leave them able to check and uncheck boxes at will, just with a separate indicator that shows that they have too many checked, and a pre-submit test to be sure there aren't too many. I think from the sound of it that's what you're doing, too.)