Question

通过大量的试验和错误（主要是错误），我已经设法将jQuery Validate，Bootstrap 3（使用Popovers用于验证消息）和DataTables合并来创建我怀疑一个相当常见的场景：

包含一列复选框的DataTable，并提供“全部选中”复选框，选中分页和过滤DataTable中的所有复选框，并应用jQuery Validate以确保用户在未选择至少一个的情况下不提交复选框。

以下是我正在做的实例的链接：http://live.datatables.net/lomelono/2/

它有效（脚本会选中所有选中的复选框（通过check all复选框，或者手动选择，以及在DataTable上进行分页和过滤），并验证是否选中了复选框。

它不做的是：

如果选中“全部选中”复选框，则清除验证错误

使用.appendTo()确保分页/过滤中所有已选中复选框的另一个奇怪的副作用是选中提交所有复选框（选中或取消选中）将在提交前显示在表单底部（提交是在示例中禁用，以便您可以看到行为）。

显然我知道jQuery足够危险，但有没有更好的方法来提交所有选中的复选框，并确保客户端验证正常工作？当然，我有一个服务器端捕获，但理想情况下我们希望在用户提交之前通知用户。

我认为我非常接近解决这个问题，并希望有人可以指出我走向终点线，这将有希望让那些有这种或类似场景的人受益。

Answer 1

解

在提交表单时，您可能需要将已检查且在DOM中不存在的<input type="checkbox">转换为<input type="hidden">。

例如：

$("#emailCompose").validate({
    submitHandler: function(form) {

       // Iterate over all checkboxes in the table
       table.$('input[type="checkbox"]').each(function(){
          // If checkbox doesn't exist in DOM
          if(!$.contains(document, this)){
             // If checkbox is checked
             if(this.checked){
                // Create a hidden element 
                $(form).append(
                   $('<input>')
                      .attr('type', 'hidden')
                      .attr('name', this.name)
                      .val(this.value)
                );
             }
          } 
       });          
    //form.submit();
    },

    // ... skipped ...
});

样本

有关详细信息和演示，请参阅jQuery DataTables: How to submit all pages form data。

使用“全部检查”按钮提交复选框并清除验证错误

1 个答案:

解

样本