禁用搜索表单字段？

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

您可以使用 jQuery 的 onChange 事件来检测下拉菜单的内容何时发生变化，然后禁用下拉菜单。

类似：

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

要重新启用它，您可以使用以下内容：

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

编辑：

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