Question

My form consists of a checkbox and a dropdown in the header and several dropdowns in the main content of my page. On page-load, I want all of the dropdowns to be disabled. Once the checkbox is checked, I want the header dropdown enabled. If the user chooses an option in the header dropdown, all of the other dropdowns should become selectable. Finally, if the checkbox in the header is clicked again, all of the dropdowns should be disabled again.

Here is the code I have tried:

HTML:

Header:
<br /><input type="checkbox" name="approve" />
<select id="myddl" name="myddl">
    <option value="1">One</option>
    <option value="2">Twooo</option>
    <option value="3">Three</option>
</select>
<div class="detail">
    <p>Detail</p>
        <br />
    <select id="Select1" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select2" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select3" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
    <br />
    <select id="Select4" name="myddl"  >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>
<br />
    <select id="Select5" name="myddl" >
        <option value="1">One</option>
        <option value="2">Twooo</option>
        <option value="3">Three</option>
    </select>    
</div>

Javascript:

 $('.detail').find('select').attr("disabled"); 

$("#myddl").change(function()
{  $('.detail').find('select').removeAttr("disabled"); 
     $('.detail').find('select').val($(this).val());

});

Live DEMO

Answer 1

var drops = $('.detail select');
var $header = $('#myddl');
$('input[name="approve"]').change(function() {
    $header.prop('disabled', !this.checked);

    if (!this.checked) {
        drops.prop('disabled', true);
    }
});

drops.add($header).prop('disabled', true);

$header.change(function() {
    drops.prop('disabled', false);
});​

Live DEMO

Note that this code cache the select elements thus it doesn’t need to query the dom multiple times.