根據選擇框的選項禁用輸入字段

Question

我想要隱藏輸入元素，直到選擇了選擇框值，或者除非選擇了選擇框值，否則禁用輸入字段。如果這是有道理的。

下面是一些代碼，我們希望將其應用於。

<div class="s_row_2 clearfix"> 
      <label><strong>Country</strong></label> 
       <select id="country" name="country" style="width: 212px;"> 
       <option value="null" selected="selected" >--- Please Select---</option> 

       <option value="nol">--- Not on this list ---</option> 
       <option value="New Zealand">New Zealand</option> 
       <option value="United Kingdom">United Kingdom</option> 
       <option value="United States">United States</option> 
       <option value="France">France</option> 
       <option value="Germany">Germany</option> 
       <option value="Spain">Spain</option> 
       <option value="Italy">Italy</option> 
       <option value="Canada">Canada</option> 

       </select> 

      <label class="required rightish"><strong>Other Country</strong></label><input type="text" name="othercountry" id="othercountry" size="30" /> 
     </div> 

如果用戶選擇（nol - 不在列表中）「不在此列表中」選擇元素中的選項。

然後我們可以使其他國家的輸入框，必填字段。或者可能更好地隱藏此輸入字段，並且僅在選擇了「nol」值時才顯示。

Answer 1

可以綁定一個事件偵聽器change事件，並檢查select的value：

$("#country").change(function() { 
    if(this.value === "nol") { 
     $("#othercountry").show(); 
    } 
}); 

很明顯，你可能會想擴展，如果選擇其他值再次隱藏輸入，並也許還會顯示/隱藏label元素。