根据先前的选择选项禁用选择输入答案

【问题标题】：Disabling select input depending on previous select option根据先前的选择选项禁用选择输入
【发布时间】：2017-01-28 19:06:31
【问题描述】：

我在这里想要实现的是：我有一个选择输入，它有 3 个选项：销售、租金、想要。根据选择的选项，还有 3 个其他选择输入。所以假设我选择了销售，那么它应该显示property sale 选择输入并隐藏另外两个，如果我选择租金，那么它应该显示property rent 选择输入并隐藏另外两个。

隐藏效果很好，但我的问题是当我使用 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>

【问题讨论】：

你试过 display=none 吗？ document.getElementById("myDIV").style.display = "none";
@TobiObeck 这不仅仅是隐藏它们，当它们被隐藏而不被禁用时，它们仍然向表单提交数据。我想防止这种情况发生。

标签： javascript php jquery html

【解决方案1】：

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

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

移除禁用：prop("disabled", false);

【讨论】：

#yourDiv 输入你的意思是 div 样式="display:none" ..？正确的？以及带有选择名称/id 的 #yourDiv 选择？
例如：else if( $(this).val() === "wanted"){ $("#pricetype").hide(); $("#propertyrent").hide(); $("#propertywanted").show(); $("#propertysale").hide(); $("#propertyrent 输入，#propertyrent 选择").prop("禁用", true); $("#propertysale 输入，#propertysale 选择").prop("禁用", true); }
谢谢！希望我能说爱你！ :D
如果可能的话，我有一个问题：如果我选择了其他选择框中不可用的选项，然后我更改了第一个选择，它会禁用所有内容吗？

【解决方案2】：

这里的 div 和你的 selectbox id 是相同的 'propertyrent','propertywanted','propertysale' 改变这个。并且当您隐藏或禁用选择框的选择框设置值空白

【讨论】：

【解决方案3】：

问题是，您没有禁用选择菜单。您正在禁用包含选择菜单的 div

<div id="propertyrent" style="display:none;">..

<select name="propertyrent" id="propertyrent" c...

对两者使用不同的 id。它会工作

【讨论】：