Question

I have a form set up which links to a database to show specific products with the requirement chosen, for example:

Category >
Manufacturer >
Paper Size >

Each of these drop downs have different attributes. The client has requested, that once Software is selected from the Category drop down that the paper size and speed drop downs become disabled.

How would I do this?

My code is:

<select id="category1">
                <option value="all">All</option>
                <option value="printers">Printers</option>
                <option value="software">Software</option>
        </select>

        <label class="minus_margin">Manufacturer: </label>
        <select id="manufacturer1">
        <option value="canon">Canon</option>
            <option value="HP">HP</option>
            <option value="epson">Epson</option>
        </select>

        <label class="minus_margin">Paper Size: </label>
        <select id="paper_size1">
            <option value="all">A4 &amp; A3</option>
            <option value="A4">A4 Only</option>
        </select>

        <label class="minus_margin">Speed: </label>
        <select id="speed1">
            <option value="all">All</option>
            <option value="20">0-20</option>
            <option value="34">21-34</option>
            <option value="44">35-44</option>
            <option value="54">45-54</option>
            <option value="69">55-69</option>
            <option value="89">70-89</option>
            <option value="90">90+</option>
         </select>`

For example, user selects software, paper size and speed drop-downs become disabled.

Thanks

Answer 1

You could use the onChange event with jQuery to detect when the content of the drop-down has changed and just disable the drop down.

Something like:

$('#dropDown').change(function() {
    if ($(this).attr("disabled") == false) { $(this).attr("disabled","disabled"); }
}

To Enable it back you would use something like:

$('#dropDown').removeAttr("disabled");

EDIT:

        $('#category1').change(function()
        {
            var selected = $(this).val();

            if (selected == 'software')
            {
                $('#paper_size1').attr("disabled","disabled");
                $('#speed1').attr("disabled","disabled");
            } else {
                if ($('#paper_size1').attr("disabled") == true) { $('#paper_size1').removeAttr("disabled"); }
                if ($('#speed1').attr("disabled") == true) { $('#speed1').removeAttr("disabled"); }
            }
        });