[英]Disable Next Page button until all radio button groups have been answered
我试图找出如何禁用“下一节”按钮,直到所有三组单选按钮都被应答。 我已经仔细搜索了一个解决方案,但大多数都提到了提交表单的时间。 我正在尝试对其进行配置,以便在所有问题都得到解答后启用该按钮。
此页面有三个面板,一次只能看到一个。 当面板1可见时,面板2和3被隐藏。 一旦面板1上的所有问题都得到解答,用户点击“下一部分”按钮,该按钮向上滑动第一部分,然后向下滑动第二部分。 我遇到的麻烦就是验证......确保在启用按钮之前,每个面板上的所有问题都得到了解答。
这是我正在使用的缩短版本:
Q1
<div id="one">
<input type="radio" name="question01" value="Q1-A">
<input type="radio" name="question01" value="Q1-B">
<input type="radio" name="question01" value="Q1-C">
</div>
Q2
<div id="two">
<input type="radio" name="question02" value="Q2-A">
<input type="radio" name="question02" value="Q2-B">
<input type="radio" name="question02" value="Q2-C">
</div>Q3
<div id="three">
<input type="radio" name="question03" value="Q3-A">
<input type="radio" name="question03" value="Q3-B">
<input type="radio" name="question03" value="Q3-C">
</div>
<button class="btn btn-primary" type="button" id="submit1" disabled="true">Next section</button>
$(document).ready(function () {
var q01 = $('input[name=question01]');
var q02 = $('input[name=question02]');
var q03 = $('input[name=question03]');
validate();
$(q01, q02, q03).change(validate);
});
function validate() {
if ($(q01).is(':checked') && $(q02).is(':checked') && $(q03).is(':checked')) {
$(".btn#submit1").prop("disabled", false);
} else {
$(".btn#submit1").prop("disabled", true);
}
}
我想这就是你需要的: http : //jsfiddle.net/vss9D/4/
$(document).ready(function() {
var q01 = $('input[name=question01]');
var q02 = $('input[name=question02]');
var q03 = $('input[name=question03]');
validate();
$("input[type='radio']").change(validate);
function validate() {
if ($(q01).is(':checked') && $(q02).is(':checked') && $(q03).is(':checked')) {
$(".btn#submit1").removeAttr("disabled", false);
} else {
$(".btn#submit1").attr("disabled", true);
}
}
});
这里的重要部分是将“验证”功能绑定到无线电组的位置。
$(q01, q02, q03).change(validate);
不是选择三个jQuery元素的有效方法。
你可以使用.add()函数来选择多个jQuery变量( 参见这个堆栈溢出问题 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.