复选框（Icheck）限制不适用于数据表中的其他页面，仅适用于第一页

Question

The limit in selectable 复选框仅适用于 table 的第一页，在第一页上，当我达到 selectable 的限制时弹出警报复选框，当我单击分页中的下一页或其他页码并单击另一个复选框时，它不会限制我，我应该怎么做它也将应用于其他页面？

这是我的代码：

$(document).ready(function() {
    var $datatable = $('#datatable-checkbox');

    $datatable.dataTable({
        'order': [[1, 'asc']]
    });

    var limit = 2;

    $datatable.on('draw.dt', function() {
        $('input').iCheck({
            checkboxClass: 'icheckbox_flat-green'
        });
    });

    $(".flat").on("ifChecked",function(e) {
        var checkboxes = $("input:checkbox");
        var $this = $(this);

        if (checkboxes.filter(":checked").length > limit) { 
            swal({
                title: "Book Limit Reached",
                text: "",
                type: "warning",
            });

            setTimeout(function() {
                $this.iCheck('uncheck');
            }, 1);
        }
    });
});

Answer 1

您需要通过在 on() 调用中提供选择器作为第二个参数来使用事件委托，请参见下面的示例：

$datatable.on('ifChecked', '.flat', function() {
    // your code here
});

来自jQueryon()方法文档：

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

参见 "Direct and delegated events" 中的 jQuery on() 方法文档和 jQuery DataTables – 为什么单击事件处理程序不起作用更多信息。

另外你需要使用$() jQuery DataTable API方法来获取所有复选框的列表，因为除当前页面之外的页面的复选框不会存在于DOM.

var checkboxes = $datatable.DataTable().$("input:checkbox");

Answer 2

供其他人参考，我是根据@Gyrocode.com的建议做的..

顺便说一句，我将 icheck 用于复选框，将 sweetalert 用于 popups/alert

$(document).ready(function() {
var $datatable = $('#datatable-checkbox');

$datatable.dataTable({
    'order': [[1, 'asc']]
});

var limit = 2;

$datatable.on('draw.dt', function() {
    $('input').iCheck({
        checkboxClass: 'icheckbox_flat-green'
    });
});

$datatable.on('ifChecked', '.flat', function() {
    var checkboxes = $datatable.DataTable().$("input:checkbox");
    var $this = $(this);

    if (checkboxes.filter(":checked").length > limit) { 
        swal({
            title: "",
            text: "",
            type: "warning",
        });

        setTimeout(function() {
            $this.iCheck('uncheck');
        }, 1);
    }
});});

复选框（Icheck）限制不适用于数据表中的其他页面，仅适用于第一页

checkbox (Icheck) limit not applying to other pages in datatable, only works in the first page

javascript

jquery

checkbox

datatables

icheck