本文共 2945 字，大约阅读时间需要 9 分钟。

layui-通过table进行状态勾选，但是在表格中有部分是启动的状态，启动状态下不能够被勾选。如下：

单选已启用的会失败

全选的会把已启用的勾选关闭

目前解决的办法 ：

在layui的工具 对勾选框进行监听

table.on('checkbox(qnyTable)', function (obj) {...............}

在官方文档上目前只有这几种方式。

如果要实现的话还需要自行去控制

所以我做了如下逻辑：

首先判定是勾选是单次单选还是单次全选，如果是单次单选 ，选择的对象里数据对象某一个条件是否为真，比如我是判断是否启用，如果是，那么不能进行勾选，

如果是单次全选，回去循环，循环获得的数据中如果有满足启用条件的，那么会取消掉勾选状态。

//监听勾选            table.on('checkbox(qnyTable)', function (obj) {                if (obj.type == 'one') {                    if (obj.data.isUsed == 1 && obj.checked) {                        layer.msg('该空间启用！不能勾选以及其他操作！', {icon: 2});                        $(this).prop("checked", false).next().removeClass("layui-form-checked");                        layui.form.render();                        return;                    }                } else if (obj.type == 'all') {                    var checkStatus = table.checkStatus('qnyTable');                    var resultStatus = [];                    for (var i = 0; i < checkStatus.data.length; i++) {                        var checkObj = checkStatus.data[i];                        if (checkObj.isUsed == 1) {                            layer.msg('有空间启用！不能全选', {icon: 2});                            //目前无法做到勾选为启用的                            //$("input[type='checkbox'][name='layTableCheckbox']").prop('checked', false);                            $('tr[data-index=' + i + ']').find("input[type = 'checkbox'][name='layTableCheckbox']").each(function () {                                $(this).prop("checked", false).next().removeClass("layui-form-checked");                            });                            //如何把checkStatus 某一条数据删除                        }                    }                    return;                }

需要注意的是在全选的状态下，不能直接通过这个方法

因为这里的this是指单次单选框这个对象，（应该是，欢迎指正，不是做前端的，只是猜测）

需要去找到数据对应的对象。

在浏览器F12中，表格会这样展示

所以现在会找到对应的对象然后再禁用。（这块就是直接参考百度其他大佬说的），但是我还不知道如何把实际选择起来的数据进行移除。

这时显示的内容就是

和

如果要进行删除操作。

也是设置了一个toolbar 进行监听

//头工具栏事件            table.on('toolbar(qnyTable)', function (obj) {                var checkStatus = table.checkStatus(obj.config.id);                switch (obj.event) {                    case'deleteCheck':                        console.log(JSON.stringify(checkStatus))                        layer.confirm('需要删除这些内容?', {btn: ['确定', '取消']}, function () {                            if (checkStatus.data.num <= 0) {                                layer.msg('选择项为空!', {icon: 2});                                return;                            }                            var resultCheck = [];                            for (var i = 0; i < checkStatus.data.length; i++) {                                var checkObj = checkStatus.data[i];                                if (checkObj.isUsed == 0) {                                    resultCheck.push(checkObj);                                }                            }}

这里的话选择的内容其实还是全选了，目前暂时的解决办法是重新创建一个数组，然后把不满足启用条件的数据放入，再进行前后端的操作。

目前暂时解决办法也只能想到这里了，不是专门做前端的 可能方法欠妥。

转载地址：http://bppc.baihongyu.com/