禁用下一页按钮，直到回答完所有单选按钮组。

Question

禁用下一页按钮，直到回答完所有单选按钮组。

3

我正在尝试找出如何禁用“下一节”按钮，直到回答了所有三组单选按钮。我已经长时间搜索解决方案，但大多数是关于提交表单时的。我正在尝试配置它，以便在回答所有问题后启用该按钮。

此页面有三个面板，每次只有一个可见。当面板一可见时，面板二和三将被隐藏。一旦回答面板一中的所有问题，用户点击“下一节”按钮，该按钮会向上滑动第一节，并向下滑动第二节。我遇到的问题是验证...确保在启用按钮之前回答了每个面板上的所有问题。

这是我正在使用的非常简短的版本：

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);
    }
}

- user3120861

这行代码 $(q01, q02, q03).change(validate); 存在问题。Skeryl的回答很好，但这里还有另一个示例：http://jsfiddle.net/tMdxU/31/。 - Scott

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- skeryl · Accepted Answer

我认为这是你需要的内容: 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);
         }
     }
});

这里很重要的一部分是将“validate”函数绑定到单选按钮组上。 $(q01, q02, q03).change(validate); 不是选择三个jQuery元素的有效方法。

您可以使用.add()函数选择多个jQuery变量（参阅此 Stack Overflow 问题）。