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

Posted 2023-05-09

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

【英文标题】：checkbox (Icheck) limit not applying to other pages in datatable, only works in the first page

【发布时间】：2017-06-27 21:43:07

【问题描述】：

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

这是我的代码：

$(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);
        
    );
); 

【参考方案1】：

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

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

来自 jQuery on() 方法文档：

委托事件的优点是它们可以处理来自 以后添加到文档中的后代元素。

有关更多信息，请参阅 jQuery on() 方法文档和 jQuery DataTables – Why click event handler does not work 中的“直接和委托事件”。

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

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

【讨论】：

感谢您的快速回复，但我想我不知道根据您的建议构建我的代码。我一直在尝试，但我认为我做得不对:( ..对不起，你能详细说明一下吗？或者如果没问题，你能根据我上面的代码构造正确的代码吗？...这对我有很大帮助。 . 谢谢你

我现在明白了，如果终于做到了.. 非常感谢！！我首先感到沮丧，而不是完全理解它:) 希望这篇文章可以帮助其他人。

当我从不同的不同页面传递选定的复选框值时，不是所有的复选框都是在表单提交期间发送的？这应该是什么可能的解决方案？

【参考方案2】：

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

顺便说一句，我将 icheck 用于复选框，将 sweetalert 用于弹出窗口/警报

$(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);
    
););