使用 alt-checkbox 进行 jQuery 复选框验证答案

【问题标题】：jQuery checkbox validation with alt-checkbox使用 alt-checkbox 进行 jQuery 复选框验证
【发布时间】：2013-05-29 19:32:06
【问题描述】：

我正在使用带有 alt-checkbox (http://alt-checkbox.starikovs.com/) 的 jquery 1.9.1 来创建一组“不错”的复选框。我还想确保至少选择了一个复选框，因此我正在使用 jQuery Validation 插件。验证在没有 alt-checkbox 样式的情况下工作正常，但是当我添加样式时验证失败。

复选框的（精简）原始代码是：

<form id="form" name ="form">
  <input type="checkbox" name="groups[]" class="checkbox" value="1">
  <input type="checkbox" name="groups[]" class="checkbox" value="2">
</form>

alt-checkbox 样式是通过以下方式添加的：

<script>
  jQuery(".checkbox").altCheckbox({
  });
</script>

验证是通过：

$("#form").validate({

    rules: {              
        'groups[]': {
          required: true,
        }
      },

      messages: {
        'groups[]': "Please select at least one group"    
      }         
});
 });
</script>

alt-checkbox 呈现：

<a href="#" class="alt-checkbox fontawesome-ok medium outline-unchecked"/>
<input type="checkbox" name="groups[]" id="groups[]" class="checkbox" value="1" style="display: none;"/>
<a href="#" class="alt-checkbox fontawesome-ok medium outline-unchecked checked"/>
<input type="checkbox" name="groups[]" id="groups[]" class="checkbox" value="2" style="display: none;"/>

我已经尝试了各种方法来使其正常工作，包括将 validate="required:true, minlength:2" 添加到第一个复选框但没有运气。有什么建议吗？

【问题讨论】：

就像你可以看到 altCheckbox 隐藏标准复选框并放在这个地方 anchor 验证插件适用于输入元素而不是锚点。
正如@WooCaSh 指出的那样，您应该使用if( $('.alt-checkbox').filter('.checked').length == 0 ) { return false; }
谢谢。很有帮助。

标签： jquery validation checkbox

【解决方案1】：

您需要做的就是允许 jQuery Validate 在隐藏元素上执行。它仍然适用于您的替代复选框实现：

$("#form").validate({
    ignore:'',//by default it ignores hidden inputs, so setting this to blank overrides that
    rules: {              
        'groups[]': {
          required: true,
        }
      },

      messages: {
        'groups[]': "Please select at least one group"    
      }         
});

【讨论】：