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

Answer 2

您需要使用.prop()功能

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

Answer 3

您可以使用jquery is(":checked")。或者通过输入所需的字段来尝试更好的方法 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>

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

3 个答案: