我有一个带有四个选择字段的简单表单。如果在任何表单字段上选择"is",则需要禁用提交按钮,并且应该出现一个隐藏的 div。这是我的标记的示例:
<form>
I have read the information on the product(s)<select name="field4"> <option value="Yes">Yes</option> <option value="No">No</option> </select>
Do you have any allergies to any ingredients in product(s)?
<select name="field5"><option value="Yes">Yes</option> <option value="No">No</option> </select>
Are you pregnant?
<select name="field6"> <option value="Yes">Yes</option> <option value="No">No</option> </select>
Have you ever used this type of product and had undesirable results?
<select name="field7"> <option value="Yes">Yes</option> <option value="No">No</option> </select>
<input name="cmdSubmit" type="submit" value="Submit" />
</form>
<div style="display:none;">Hidden div only to appear if any of the four dropdowns are marked YES.</div>
感谢您在这方面的帮助。我是一名 jquery 新手,正在尽我最大的努力学习。
最佳答案
我不完全理解您构建表单的方式的业务逻辑和您的要求,但是......根据您在这里所说的内容就是我要做的。
- 编写函数来检查所有选项、更改禁用/启用提交、显示/隐藏 div
- 加载时调用函数
- 每次选项值更改时调用函数检查所有选项
.
checkOptions();
$("select").change(checkOptions);
function checkOptions() {
var yesFound = false;
$("select").each(function(index, element) {
if ( $(element).val() == "Yes" ) {
yesFound = true;
}
});
if (yesFound) {
$("#hidden-div").show();
$("input[type=Submit]").attr("disabled","disabled");
} else {
$("#hidden-div").hide();
$("input[type=Submit]").removeAttr("disabled");
};
}
稍微修改了 HTML:
<form>
<select name="field4">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select> I have read the information on the product(s)<br/>
<select name="field5">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select> Do you have any allergies to any ingredients in product(s)?<br/>
<select name="field6">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select> Are you pregnant?<br/>
<select name="field7">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select> Have you ever used this type of product and had undesirable results?<br/>
<br/>
<input name="cmdSubmit" type="submit" value="Submit" />
</form>
<div id="hidden-div" style="display:none;">Hidden div only to appear if any of the four dropdowns are marked YES.</div>
示例网页:
http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-disable-submit-dynamically.html加载时:
所有选项均为“否”,只有一个:
所有选项"is":
关于jquery - 如果选择了选项,则使用 Jquery 禁用提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4326680/