Layui根据条件禁用表格复选框

最新推荐文章于 2024-01-25 17:08:48 发布

爱吃果果的噜噜噜

最新推荐文章于 2024-01-25 17:08:48 发布

阅读量2.8k

点赞数 3

文章标签： layui checkbox js

本文链接：https://blog.csdn.net/qq_42607626/article/details/113566343

版权

Layui根据条件禁用表格复选框

参考了网上其他方法，稍稍优化了一下，如果table有部分禁用的数据，直接就把全选禁用了，但是如果想通过点击全选按钮实现选中其他未被禁用的数据项，就需要另外加判断了，这里只是简单的“一刀切”的办法。

table.render({
     elem: '#xxx',
     height: 500,
     url: 'xxx', //数据接口
     page: true, //开启分页
     toolbar: '#toolbarDemo',
     cols: [[ //表头
         {field: 'state', title: '状态', sort: true, width: 150}
     ]],
     done: function (res, curr, count) {
         var states = "";
         for (var i in res.data) {
             var item = res.data[i];
             if ((item.state !="已上报数据")) {// 判断禁用的条件
                 // checkbox 根据条件设置不可选中
                 $('tr[data-index=' + i + '] input[type="checkbox"]').prop('disabled', true);
                 states = "1";// 隐藏表头全选判断状态
                 form.render();// 重新渲染一下
             }
         }
         if(states == "1"){
             // 禁用全选 checkbox
             $('th[data-field='+0+'] input[type="checkbox"]').prop('disabled',true);
         }
         form.render('checkbox');
     }
 })