javascript - 根据先前的选择选项禁用选择输入

Question

我在这里想要实现的是:我有一个选择输入，有 3 个选项:出售、出租、通缉。根据选择的选项，还有 3 个其他选择输入。因此，假设我选择“销售”，那么它应该显示“特性销售”选择输入并隐藏其他两个，如果我选择“出租”，那么它应该显示“特性租金”选择输入和隐藏另外两个。

隐藏效果很好，但我的问题是当我使用 GET 提交搜索时，它会传递其他两个隐藏选择输入的数据，因为它们没有被禁用。我尝试根据选择禁用它们，如下面的代码所示，但它不起作用。有什么帮助吗？

这是我的代码:

<script type="text/javascript">  
   $('#type').on('change',function(){
    if( $(this).val() === "sale"){
    $("#propertyrent").hide();
    $("#propertywanted").hide();
    $("#pricetype").show();
    $("#propertysale").show();
    document.getElementById("propertyrent").disabled=true;
    document.getElementById("propertywanted").disabled=true;
    } 
    else if( $(this).val() === "rent"){
    $("#pricetype").hide();
    $("#propertyrent").show();
    $("#propertywanted").hide();
    $("#propertysale").hide();
    document.getElementById('propertysale').disabled=true;
    document.getElementById('propertywanted').disabled=true;

    } 
    else if( $(this).val() === "wanted"){
    $("#pricetype").hide();
    $("#propertyrent").hide();
    $("#propertywanted").show();
    $("#propertysale").hide();
    document.getElementById('propertyrent').disabled=true;
    document.getElementById('propertysale').disabled=true;
    } 
});


</script>

            <label class="col-sm-3 control-label">Type</label>
                <select name="type" id="type">
                    <option value="sale">Sale</option>
                    <option value="rent">Rent</option>
                    <option value="wanted">Wanted</option>
                </select>       


<div id="propertysale">
            <label class="col-sm-3 control-label">Property</label>
                <select name="propertysale" id="propertysale" class="form-control col-sm-12">
                <option value="all">Any</option>
                <option value="houses">Houses</option>

                <option value="apartments">Apartments</option>

                <option value="land">Land</option>


                <option value="buildings">Buildings</option>

                <option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
                </select>
        </div>

        <div id="propertyrent" style="display:none;">
            <label class="col-sm-3 control-label">Property</label>
                <select name="propertyrent" id="propertyrent" class="form-control col-sm-12">
                <option value="all">Any</option>
                <option value="houses">Houses</option>
                <option value="apartments">Apartments / Flats</option>
                <option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
                </select>
        </div>

        <div id="propertywanted" style="display:none;">
            <label class="col-sm-3 control-label">Property</label>

                <select name="propertywanted" id="propertywanted" class="form-control col-sm-12">
                <option value="all">Any</option>
                <option value="houses">Houses</option>

                <option value="apartments">Apartments</option>

                <option value="land">Land</option>


                <option value="buildings">Buildings</option>

                <option value="wfsc" >Warehouse / Factory / Store / Chalet</option>
                </select>

Answer 1

对 div 内的任何输入使用 jQuery 选择器来禁用它们:

$("#yourDiv input, #yourDiv select").prop("disabled", true);

要删除禁用: prop("disabled", false);