選択ボックスの選択に基づいて入力フィールドを無効にする

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> 

ユーザがselect要素の "Not on this list"オプションを（nol - not on list）選択した場合。

その他の国入力ボックス、必須フィールドを作成することができますか？または、おそらくこの入力フィールドを非表示にして、 "nol"値が選択されている場合にのみ表示してください。

Answer 1

あなたはchangeイベントにイベントリスナーをバインドし、selectのvalueを確認することができます。

明らか

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

を、あなたはおそらく別の値を選択した場合は、再度入力を非表示にすることを拡張したいと思うでしょうし、おそらくlabel要素を表示/非表示にします。