Using jQuery to disable multiple selects.

Question

Hey folks.

I have 7 select menus. I want to have the user make three choices, leaving 4 select menus disabled. Here is the link: http://www.missionsolano.org/support_volunteer_form.php (under Areas of Interest).

I open to using jQuery form validator plugins as well. Anyone have any tips?

Answer 1

This seems to work for me.

$('.aoi_select').change(function(){
    var totalSelected = $('.aoi_select[selectedIndex!=0]').length;
    if (totalSelected >= 3)
        $('.aoi_select[selectedIndex=0]').attr('disabled', 'disabled');
    else
        $('.aoi_select').removeAttr('disabled');
});