javascript - 根据从 <select> 元素中选择的选项禁用不同的输入

Question

我正在创建一个联系我们表单，该表单应包含多个文本输入、一个文本区域和一个提交按钮。此表单上方应该是一个包含三个选项的下拉选择，在本例中我使用了“选择一个选项”、“选项 1”和“选项 2”。

我正在尝试获取它，以便禁用表单上的所有元素，除非选择“选项 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

试试这个:首先不要对多个输入(元素)使用相同的 id，使用类或名称属性而不是 id。 按名称获取所有元素，然后禁用-

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>