CODEWITHSUNDEEP
jqueryselect
xXPhenom22Xx
xXPhenom22Xx

Reputation: 1275

Disable SELECT until previous SELECT has been picked

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:

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

Upvotes: 2

Views: 1572

Answers (2)

karim79
karim79

Reputation: 342665

Assuming that all but the first are already disabled:

$("select").change(function() {
    if ($(this).val() !== "select job") {
        $(this).next("select").prop("disabled", false);
    } else {
        if(!$(this).index() === 0)
            $(this).prop("disabled", true);   
        $(this).next("select").prop("disabled", true);        
    }
});​

Demo.

I would normally suggest reading the brilliant resource that is http://www.whathaveyoutried.com/ first but I'm waiting for the next bus so I need something to do to kill time (that's not work work).

Upvotes: 5

Sinetheta
Sinetheta

Reputation: 9449

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

Upvotes: 2

Related Questions