向动态创建的复选框 jQuery 添加验证

Question

我正在研究动态表单，即单选，动态添加复选框。不幸的是，我坚持添加验证。

如何为复选框添加 require 属性？

以下代码

<ol type="a">
  <li><input type="radio" name="answer0[]">A</li>
  <li><input type="radio" name="answer0[]">A</li>
  <li><input type="radio" name="answer0[]">A</li>
</ol>
<ol type="a">
  <li><input type="checkbox" name="answer1[]">A</li>
  <li><input type="checkbox" name="answer1[]">A</li>
  <li><input type="checkbox" name="answer1[]">A</li>
</ol>

1. 输入类型取决于问题是单选还是复选框
2. 可能有任意数量的问题answer1[]、answer2[]、answer3[]

第一种方法如下

$('ol').each(function (i) {
    $(this).find("input:first").prop("required", true);
});

由于输入元素具有相同的名称，radio 类型可以正常工作。但是复选框只需要在第一次输入时被选中。

第二

$('ol').each(function (i) {
    $("[name='answer"+i+"[]']").rules("add", {required:true});
});

但它给出了以下错误

无法读取未定义的属性“设置”

如何为复选框添加验证，至少必须选中一个...

Answer 1

好的，试试这个解决方案：

var rules = {};

$('ol [type="checkbox"], ol [type="radio"]').each(function(i,el){
    var name = $(el).attr('name');
    if(rules[name] === undefined){
        rules[name] = {
            required: true
        };
    }
});

$("#myform").validate({
    rules: rules
});

Answer 2

我会直接将动态逻辑添加到“规则”中。 我最近解决了一个表单有两个默认提交按钮的问题。添加规则作为函数处理它。

Answer 3

你可以试试

$('ol').each(function (i) {
    $(this).find("input[type='checkbox']").prop("required", true);
});

尝试检查选中复选框的长度

$('ol').find('input[type="checkbox"]:checked').length