禁用“下一页”按钮，直到所有单选按钮组都已应答

Question

I'm trying to figure out how to disable a "Next section" button until all three groups of radio buttons have been answered. I've searched at length for a solution, but most refer to when a form is submitted. I'm trying to configure it so that the button is enable once all questions are answered.

This page has three panels, with only one visible at a time. When panel one is visible, panels two and three are hidden. Once all the questions on panel one are answered, the user clicks a "Next section" button, which slides up section one, and slides down section two. The trouble I'm having is the validation... making sure all questions on each panel are answered before enabling the button.

Here's a very shortened version of what I'm working with:

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

Answer 1

I think this is what you need: 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);
         }
     }
});

---

The important part here is where you bind the "validate" function to the radio groups.

$(q01, q02, q03).change(validate); is not a valid way to select three jQuery elements.

you can use the .add() function to select multiple jQuery variables ( see this stack overflow question )