禁用下一页按钮，直到所有单选按钮组都得到答复

Posted 2023-03-05

【中文标题】禁用下一页按钮，直到所有单选按钮组都得到答复

【英文标题】：Disable Next Page button until all radio button groups have been answered

【发布时间】：2014-06-09 03:53:06

【问题描述】：

我试图弄清楚如何禁用“下一部分”按钮，直到所有三组单选按钮都得到回答。我已经详细搜索了一个解决方案，但大多数是指提交表单的时间。我正在尝试对其进行配置，以便在回答所有问题后启用该按钮。

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

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

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

【问题讨论】：

$(q01, q02, q03).change(validate); 这一行有问题。 Skeryl 的回答很好，但这是另一个小提琴：jsfiddle.net/tMdxU/31

【参考方案1】：

我认为这是您需要的： 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变量（see this stack overflow question）

【讨论】：

不客气！如果此答案已解决您的问题，请单击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。