layui table中的checkbox禁用问题

yzmy

已于 2024-09-19 11:15:01 修改

阅读量524

点赞数 3

文章标签： layui 前端 javascript

于 2024-09-19 11:13:48 首次发布

本文链接：https://blog.csdn.net/lizaiismy/article/details/142355041

版权

在项目开发中遇到table框已经选择过的数据不支持二次选择从而要禁用复选框不许选中，但会导致复选框全选时layui的table组件源码中赋值时是根据全部复选框的下标顺序来赋值到数组中返回给你，这样已被禁用复选框的数据也会被push到数组中导致数据错乱；本layui 版本为2.4.5，现解决方案如下，找到layui的table.js源码文件

第一步找到下面代码块

// 找到该代码块！！！！！
a.elem.on("click", 'input[name="layTableCheckbox"]+', function () {
    var e = t(this).prev(), i = a.layBody.find('input[name="layTableCheckbox"]'),
         l = e.parents("tr").eq(0).data("index"), n = e[0].checked,
         o = "layTableAllChoose" === e.attr("lay-filter");
     o ? (i.each(function (e, t) {
         t.checked = n, a.setCheckData(e, n)
     }), a.syncCheckAll(), a.renderForm("checkbox")) : (a.setCheckData(l, n), a.syncCheckAll()), layui.event.call(e[0], u, "checkbox(" + p + ")", v.call(e[0], {
         checked: n,
         type: o ? "all" : "one"
     }))
 })

第二部在第一步的代码快下面添加

a.elem.on("click", 'input[name="checkChooseAll"]+', function () {
            var e = t(this).prev(), i = a.layBody.find('input[name="checkChooseAll"]'),
                l = e.parents("tr").eq(0).data("index"), n = e[0].checked,
                o = "tableCheckChooseAll" === e.attr("lay-filter");
            var _i = a.layBody.find('input[name="layTableCheckbox"]');
            if(o){
                i.each(function (e, i) {
                    var idx = t(i).parents('tr').attr('data-index');
                    i.checked = n, a.setCheckData(idx, n)
                });
                (_i.each(function (e, i) {
                    var idx = t(i).parents('tr').attr('data-index');
                    i.checked = n, a.setCheckData(idx, n)
                }), a.syncCheckAll(), a.renderForm("checkbox"))
            }else {
                var id = e.data('id');
                var idName = e.data('idKey');
                var bc = a.layBody.find('[data-check-id="' + id + '"]');
                (bc.each(function (e, t) {
                    t.checked = n;
                }), a.renderForm("checkbox"));
                var r = d.cache[a.key];
                t.each(r, function (idx, ee) {
                    if (ee[idName] === id) {
                        a.setCheckData(idx, n)
                    }
                });
            }
            layui.event.call(e[0], u, "checkbox(" + p + ")", v.call(e[0], {
                checked: n,
                type: o ? "all" : "one"
            }))
        })

第三步回到你渲染table数据的js中修改checkbox；其中注意data-id的值与data-id-key的字段需要一致，因在第一步代码块中有做判断处理

 {
    field: 'choosePatient',
     width: 60,
     align: 'center',
     title: '<input type="checkbox" name="checkChooseAll" lay-skin="primary" lay-filter="tableCheckChooseAll">',
     templet: function (d) {
         return '<input type="checkbox" lay-skin="primary" class="check-all" name="checkChooseAll" data-id="' + d.drugsInfo + '" data-id-key="drugsInfo">'
     }
 }