如何获取未选中的单选按钮（jQuery）？

Question

I'm building a dynamic mobile quiz app with php and mysql. The app contains 10 multiple-choice questions, some (but not all) of which may be radio buttons (the others are drop-down select).

I want to ensure that all the radio buttons have been selected before the submit button is enabled. Here's the script I found on SO:

<script type="text/javascript">
    $(document).ready( function() {  
        $('#submitform').prop('disabled', true);
        inspectAllInputFields();
    });

    $('input[type=radio]').change(function() {
       inspectAllInputFields();
    });

    function inspectAllInputFields(){
         var count = 0;
         $('.radio-button').each(function(i){           
           if(  $(this).val() === '') {  // this line doesn't work
               count++;
            }
            if(count == 0){
              $('#submitform').prop('disabled', false);
            }else {
              $('#submitform').prop('disabled', true);              
            }
        });
    }
</script>

Here is an extract of the form code (i just used the first few questions, 2 of which are radio and 1 is a select):

<div class="row">
    <div class="col-md-8">
        <h5>1.  Question  1</h5>                                      
    </div>            
    <div class="col-md-4 questionclass">
        <div class="radio"> 
            <ul class="radio-button" name="question1_ul">
                <li>
                    <input type="radio" name="question1" value="true" id="question1_true">
                    <label for="question1_true">True</label>                                 
                </li>
                <li>
                    <input type="radio" name="question1" value="false" id="question1_false">
                    <label for="question1_false">False</label>                                 
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <h5>2. Question 2?</h5>      
    </div>            
    <div class="col-md-4 questionclass">
        <div class="radio"> 
            <ul class="radio-button" name="question2_ul">
                <li>
                    <input type="radio" name="question2" value="real" id="question2_real">
                    <label for="question2_real">Real</label>                                 
                </li>
                <li>
                    <input type="radio" name="question2" value="fake" id="question2_fake">
                    <label for="question2_fake">Fake</label>                                 
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <h5>3. Question 3 </h5>         
    </div>            
    <div class="col-md-4 questionclass">
        <select class="form-control bg-silver" name="question3"> 
            <option value="0-10%">0-10%</option>
            <option value="11-20%">11-20%</option>
            <option value="21-30%">21-30%</option>
            <option value="31-40%">31-40%</option>
            <option value="41-50%">41-50%</option>
            <option value="51-60%">51-60%</option>
            <option value="61-70%">61-70%</option>
            <option value="71-80%">71-80%</option>
            <option value="81-90%">81-90%</option>
            <option value="91-100%">91-100%</option>  
        </select>                
    </div>
</div>

 <!-- other questions deleted -->

 <button class="btn btn-primary btn-block " id="submitform" disabled>Compute results</button>

How do I fix the jquery code so that the submit button is only enabled if the user has clicked something for all the radio buttons?

Answer 1

Use the below javascript

$(document).ready( function() {  
    $('#submitform').prop('disabled', true);
    inspectAllInputFields();
});

$('input[type=radio]').change(function() {
   inspectAllInputFields();
});

function inspectAllInputFields(){
     var count = 0;
     $('#submitform').prop('disabled', false);
     $('.radio-button').each(function(i){           
      count = $(this).find('input[type=radio]:checked').length;
        if(count == 0){
          $('#submitform').prop('disabled', true);
        }
    });
}

Please check the fiddle link as well

Answer 2

您需要使用.prop()函数

if($(this).prop('checked') !== false);

Answer 3

You can use jquery is(":checked") . or you try a better approach by making input fields required Disable button until all required fields are completed

    <script type="text/javascript">
        $(document).ready( function() {  
            $('#submitform').prop('disabled', true);
            inspectAllInputFields();
        });

        $('input[type=radio]').change(function() {
           inspectAllInputFields();
        });

        function inspectAllInputFields(){
           //If both checked enable submit button
          if($("input[name=question1]").is(":checked") && $("input[name=question2]").is(":checked")) {
             $('#submitform').prop('disabled', false);
          }
        }
    </script>