<select>要素から選択したオプションに基づいて異なる入力を無効にする

Question

複数のテキスト入力、テキスト領域&送信ボタンを承認する必要がある連絡先フォームを作成しています。このフォームの上には、この例では3つのオプションを含むドロップダウン選択が必要です。「オプションを選択」、「オプション1」&「オプション2」を使用しました。

「オプション1」が選択されていない限り、フォームのすべての要素が無効になるようにしようとしています。したがって、他の2つのいずれかが選択されている場合は、ユーザーがフォームにアクセスできないようにする必要があります。

現在、私は1つの入力を無効にする方法を理解できましたが、もう1つは同じように動作しないようです。これの背後にある理由は何ですか？また、他の要素を無効にする方法は？

function checkOption(obj) { 
 
    var input = document.getElementById("input"); 
 
    input.disabled = obj.value == "A"; 
 
}

<p>Contact Us Form </P> 
 

 
<select id="menu" onChange="checkOption(this)"> 
 
    <option value="A">Select An Option</option> 
 
    <option value="B">Option 1</option> 
 
    <option value="A">Option 2</option> 
 
</select> 
 

 
<br> 
 
<p> First Name </p> 
 
<input type="text" id="input" disabled> 
 

 
<p> Second Name </p> 
 
<input type="text" id="input" disabled> 
 

 
<p>Enquiry</p> 
 
<textarea rows="4" cols"50" id="textarea"> 
 
Lorem ipsum dolor sit amet, an modo mucius eum, 
 
sanctus concludaturque qui no. Stet esse intellegat no eam, 
 
nonumes eligendi disputationi ad usu. 
 
</textarea> 
 

 
<br> 
 
<input type="submit" value="Submit">

Answer 1

を行うことができるよりも

。 名前ですべての要素を取得し、その後DISABLE-

function checkOption(obj) { 
 
    var input = document.getElementsByName("input"); 
 
    for(var i=0; i < input.length; i++) { 
 
    input[i].disabled = !(obj.value == "B") 
 
    } 
 
}

<p>Contact Us Form </P> 
 

 
<select id="menu" onChange="checkOption(this)"> 
 
    <option value="A">Select An Option</option> 
 
    <option value="B">Option 1</option> 
 
    <option value="A">Option 2</option> 
 
</select> 
 

 
<br> 
 
<p> First Name </p> 
 
<input type="text" name="input" disabled> 
 

 
<p> Second Name </p> 
 
<input type="text" name="input" disabled> 
 

 
<p>Enquiry</p> 
 
<textarea rows="4" cols"50" id="textarea" name="input" disabled> 
 
Lorem ipsum dolor sit amet, an modo mucius eum, 
 
sanctus concludaturque qui no. Stet esse intellegat no eam, 
 
nonumes eligendi disputationi ad usu. 
 
</textarea> 
 

 
<br> 
 
<input type="submit" value="Submit" name="input" disabled>

Answer 2

まず重複したIDを削除してください。すべての最初のクラスまたは名前属性の代わりにIDを使用して、複数の入力（要素）に同じIDを使用していない：あなたはこれを試してみてください

このような

function checkOption(obj) { 
     if(obj.value!="Option_1"){ 

     $("#formId:input").prop("disabled", true); 

     }else{ 

     $("#formId:input").prop("disabled", false); 
     } 

    }