根据从<select>元素

Disable different Inputs based on Option selected from a <select> element

本文关键字：select 元素      更新时间：2023-09-26

我正在创建一个联系我们的形式，它应该承认多个文本输入，一个文本区域&;提交按钮。在这个表单的上方应该是一个下拉选择，有三个选项。在这个例子中，我使用了"选择一个选项"，"选项1"&"Option2"。

我试图得到它，以便所有的元素上的形式是禁用的，除非'选项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">

试试这个:首先不要对多个输入(元素)使用相同的id，使用class或name属性代替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>

先删除重复的id

你可以这样做

 function checkOption(obj) {
        if(obj.value!="Option_1"){
         $("#formId:input").prop("disabled", true);
        }else{
         $("#formId:input").prop("disabled", false);
        }
    }
相关文章：