Question

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 red 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

Answer 1

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