如何根据下拉值禁用/启用表单
How can i disable/enable form based on dropdown value
我在同一页上有两个表单。我想根据在第一个表单上选择的下拉值启用/禁用表单元素。
在第一个下拉列表中选择选项1或<option value="">Select</option>
时,我想禁用第一个窗体或<select name="tractor" ..>
的第二个下拉列表以及第二个窗体窗体上的所有内容。
如果从<select name="tire">
中选择了Rear Tire
或Front Tire
,但在第二个下拉列表中没有选择任何内容,我希望启用<select name="tractor">
并保持禁用第二个窗体。
第一个表单
<form method="post">
<select name="tire">
<option value="">Select</option>
<option value="rear">Rear Tire</option>
<option value="front">Front Tire</option>
</select>
<select name="tractor">
<option value="">select Type</option>
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<input type="submit" value="Go" name="cmd_submit" />
2nd Form//页面加载时希望禁用
<form method="post" id="vehicle" action="page.php">
.
.
.
</form>
只需检查第一个下拉列表的值。我在下拉菜单first
和second
:中添加了一些类
<h3> First form </h3>
<form method="post" class="firstform">
<select name="tire" class="first">
<option value="">Select</option>
<option value="rear">Rear Tire</option>
<option value="front">Front Tire</option>
</select>
<select name="tractor" class="second" disabled>
<option value="">select Type</option>
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<input type="submit" value="Go" name="cmd_submit" />
</form>
<h3> Second form </h3>
<form method="post" id="vehicle" action="page.php" class="secondform">
<label>A form with no fields is useless: </label>
<input type="text" placeholder="so here a field" class="secondformfield" /> <br />
<label>This is a dropdown: </label>
<select name="tractor" class="secondformfield">
<option value="">...</option>
<option value="2wd">With an option</option>
<option value="mfwd">And another option</option>
</select> <br />
<textarea class="secondformfield">some text</textarea>
<input type="button" value="And away!" name="cmd_away" class="secondformfield"/>
</form>
Js
$(document).ready(function(){
$(".secondform .secondformfield").prop("disabled",true);
$(".first").change(function(){
if($(this).val() !== ""){
$(".second").prop("disabled",false);
}
else{
$(".second").prop("disabled",true);
}
checkIfEverythingIsFilledIn();
});
$(".second").change(function(){
checkIfEverythingIsFilledIn();
});
function checkIfEverythingIsFilledIn(){
if($(".first").val() !== "" && $(".second").val() !== ""){
$(".secondform .secondformfield").prop("disabled",false);
$(".secondform").attr("method","post").attr("action","page.php");
}
else{
$(".secondform .secondformfield").prop("disabled",true);
$(".secondform").removeAttr("method").removeAttr("action");
}
}
});
为了防止提交表单,有多种解决方案。子按钮将自动禁用,因为它也是input
类型。另一个选项是删除/添加表单的属性,就像我在上面和JsFiddle 中所做的那样
编辑:@WorldFS的一个好建议更新了js代码
相关文章:
- Rails-带有单选按钮的表单,带有启用/禁用附加元素的javascript操作
- 使用JavaScript或Prototype获取表单中的所有控件并启用它们
- 如何根据所选下拉列表中的值启用和禁用表单控件
- 在已禁用的 p:tabView 中启用 p:tab,而不更新所有表单(素数)
- Javascript-更正用户名和密码以启用另一个表单
- 在检查单选按钮检查状态后启用/禁用表单元素
- 如何根据下拉值禁用/启用表单
- Javascript:需要帮助验证表单的两个方面,然后启用“提交”按钮
- 禁用和重新启用表单 在 Rails 中使用 JQuery 提交
- 在响应文件下载时重新启用表单提交按钮
- 如何在ajax请求中禁用/启用表单提交
- 根据表单选择值禁用和启用表单文本输入.
- 在下面的场景中,如何在AJAX函数调用中禁用和启用表单上存在的所有具有相同类的按钮
- AngularJS:启用表单输入更改按钮
- 在Asp上对ajax动态加载的视图启用表单验证的解决方案.净Mvc3
- 检测主干模型更改以启用表单保存按钮并更新模型
- 如何在angular2中启用表单?
- 在启用表单提交之前,强制用户填写所有字段
- JavaScript查询-使用AND &OR使用无线电、复选框和文本字段来启用表单元素
- 在密码字段具有焦点后启用表单登录按钮