jquery验证检查3个复选框的状态都被选中然后启用按钮

Posted 2023-05-09

【中文标题】jquery验证检查3个复选框的状态都被选中然后启用按钮

【英文标题】：jquery validation to check status of 3 checkboxes are all checked then enable button

【发布时间】：2014-11-11 06:24:53

【问题描述】：

我有一个包含一些文本字段、三个复选框和一个提交按钮的表单。 目前我禁用了提交按钮，只有在选中所有三个复选框时才应该启用它。

我只能通过选中一个复选框来弄清楚如何启用它。

如何确保在启用按钮之前检查所有三个？

表格结束

<input name="list1" id="list1" type="checkbox"  value="" >
<input name="list2" id="list2" type="checkbox"  value="" >
<input name="list3" id="list3" type="checkbox"  value="" >
<input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">

脚本

<script type="text/javascript">
$(function() 
 $('#list1').click(function() 
  if ($(this).is(':checked')) 
   $('#pay-button').removeAttr('disabled');
   else 
   $('#pay-button').attr('disabled', 'disabled');
  
 );
);
</script>

【参考方案1】：

试试

$(function () 
    var $checks = $('#list1, #list2, #list3').change(function () 
        $('#pay-button').prop('disabled', $checks.is(':not(:checked)'));
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="list1" id="list1" type="checkbox"  value="" >
<input name="list2" id="list2" type="checkbox"  value="" >
<input name="list3" id="list3" type="checkbox"  value="" >
<input id="pay-button" type="image" disabled="disabled" src="//placehold.it/32/fff000" value="" name="save">

您可以通过向这些元素添加一个公共类然后使用类选择器来简化选择器 #list1, #list2, #list3

【讨论】：

@Jhecht Introducing Runnable JavaScript, CSS, and html Code Snippets

我添加了前面提到的类选择器。谢谢你。效果很好。

【参考方案2】：

您可以尝试比较选中复选框的数量和总数：

<div id="wrapper">
  <input name="list1" id="list1" type="checkbox"  value="" >
  <input name="list2" id="list2" type="checkbox"  value="" >
  <input name="list3" id="list3" type="checkbox"  value="" >
</div>
<input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">

脚本

<script type="text/javascript">
$(function() 
 $('#wrapper').on('click', 'input[type="checkbox"]', function() 
  if ($('#wrapper').find(':checked').size() === $('#wrapper').find(':checkbox').size()) 
   $('#pay-button').removeAttr('disabled');
   else 
   $('#pay-button').attr('disabled', 'disabled');
  
 );
);
</script>

【参考方案3】：

编辑如下代码，然后重试：

HTML：

 <input class="chck" name="list1" id="list1" type="checkbox"  value="" >
 <input class="chck" name="list2" id="list2" type="checkbox"  value="" >
 <input class="chck" name="list3" id="list3" type="checkbox"  value="" >
 <input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">

JS：

<script type="text/javascript">
   $(function() 
      $('.chck').click(function() 
        var isAllChecked = true;

        for(var i = 0; i < $('.chck').length; i++)
        
            if(!$('.chck')[i].is(':checked'))
                isAllChecked = false;
        

        if (isAllChecked) 
           $('#pay-button').removeAttr('disabled');
         else 
           $('#pay-button').attr('disabled', 'disabled');
        
      );
   );
</script>

【参考方案4】：

在您的复选框中添加一个类名，即.checkboxes

 $(".checkboxes").click(function () 

            var blnEnableBtn = false;
            var count = 0;
            $('input:checked').each(function (index, element) 
                count++;
            );

            if (count == 3)
                $("#pay-button").removeAttr('disabled');
            else
                $("#pay-button").attr('disabled', 'disabled');

        );

希望对您有所帮助。