Question

I have a form with 3 dropdowns that I want to toggle the disabled state progressively. I want to disable the 2nd and 3rd dropdown initially, when the user selects an option from the 1st, the 2nd is enabled, when the 2nd option is selected I want the 3rd to be enabled.

How can do this with jquery? Thanks

Here is the code:

<select name="type" id="select1" style="width:200px" onchange="populate(1);">
<option value="" selected="selected">Select Option 1</option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select>
<br /><br />
<select name="make" id="select2" style="width:200px" onchange="populate(2);"disabled="disabled">
<option value="">Select Option 2</option>
<option value="first2">First</option>
<option value="second2">Second</option>
<option value="third2">Third</option>
</select>
<br /><br />
<select name="model" id="select3" style="width:200px" onchange="Go(this);"disabled="disabled">
<option value="">Select Make</option>
<option value="first3">First</option>
<option value="second3">Second</option>
<option value="third3">Third</option>

Answer 1

You can do it with a simple nextAll() like this:

$('select').change(function(){ 
   $(this).nextAll('select:first:disabled').prop('disabled',false);
})

example: http://jsfiddle.net/niklasvh/uFzbX/