Question

I have 5 HTML select boxes that are all populated with the same data, so not a “chained select”.

I want to have select2 disabled until select1 has been picked and select 3 disabled until SELECTS 1 & 2 have been picked, etc.

My SELECT IDs are:

• primary (1)
• record1 (2)
• record2 (3)
• record3 (4)
• record4 (5)

The default value of all the SELECTS is “Select Job”

If a SELECT has ANY OTHER value than “Select Job” then the next SELECT in line can become active.

Not really sure how to do this in jQuery

Answer 1

Here is a solution which is independent of how they appear on the page. It could be simplified if the select boxes are always sure to appear in the correct order. jsFiddle

var linkOrder = [
    "primary",
    "record1",
    "record2",
    "record3",
    "record4"
];
$('select.linked').not('#' + linkOrder[0]).attr('disabled', 'disabled');
$('.linked').change(function(){
    var id = $(this).attr('id');
    var index = $.inArray(id, linkOrder);
    $('#' + linkOrder[index+1]).removeAttr('disabled');
});