javascript - 如何获取未选中的单选按钮(Jquery)？

Question

我正在使用 php 和 mysql 构建一个动态移动测验应用程序。该应用程序包含 10 个多项选择题，其中一些(但不是全部)可能是单选按钮(其他是下拉选择)。

我想确保在启用提交按钮之前已选择所有单选按钮。这是我在 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>

这里是表单代码的摘录(我刚刚使用了前几个问题，其中 2 个是单选问题，1 个是选择问题):

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

如何修复 jquery 代码，以便仅当用户单击所有单选按钮的某些内容时才启用提交按钮？

Answer 1

使用下面的 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);
        }
    });
}

请检查fiddle link还有