前の選択オプションに応じて選択入力を無効にする

Question

私がここで達成しようとしているのは、次の3つのオプションを持つ選択入力があります：セール、レンタル、募集。どのオプションが選択されているかに応じて、3つの選択入力があります。それで、私がSaleを選択したら、property sale選択入力を表示し、他の2つを非表示にする必要があります。レンタルを選択すると、property rent選択入力が表示され、他の2つは非表示になります。

隠蔽はうまくいますが、私の問題はGETを使用して検索を依頼すると、無効にされていない2つの隠し選択入力のデータが渡されます。下のコードに示すように、選択に応じてそれらを無効にしようとしましたが、機能しませんでした。どんな助け？ここで

は私のコードです：

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

Answer 2

ここdivとあなたのselectbox idは同じ 'propertyrent'、 'propertywanted'、 'propertysale'と変わります。 選択ボックスの値を非表示または無効にする場合空白選択ボックス

Answer 3

問題は、選択メニューを無効にしていないことです。選択メニューを含むdivを無効にしています

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

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

両方とも異なるIDを使用してください。それは動作します