Отключить поля формы поиска?

Question

У меня есть настроенная форма, которая ссылается на базу данных для отображения конкретных продуктов с выбранным требованием, например:

Категория> Производитель> Размер бумаги>

Каждый из этих выпадающих списковимеют разные атрибуты.Клиент запросил, чтобы после выбора программного обеспечения из раскрывающегося списка «Категория» раскрывающиеся значения размера и скорости бумаги были отключены.

Как бы я это сделал?

Мой код:

<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>`

Например, пользователь выбирает программное обеспечение, размер бумаги и раскрывающиеся значения скорости становятся недоступными.

Спасибо

Answer 1

Вы можете использовать событие onChange с jQuery, чтобы обнаружить изменение содержимого раскрывающегося списка и просто отключить раскрывающийся список.

Что-то вроде:

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

Чтобы включить его обратно, вы должны использовать что-то вроде:

$('#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"); }
            }
        });