为什么layui动态加载的复选框无法选中？

本文共计488个文字，预计阅读时间需要2分钟。

问题描述：

1.使用layui制作后台界面时，遇到layui与ajax数据动态加载的checkbox偶发不能正常勾选的问题。

2.分页时，最后一页数据过少可能会导致其他页下方数据无法选中。

3.页面未加载完成或加载过快。

问题描述

1.最近用layui做后台界面，遇到layui跟ajax数据动态加载的checkbox，偶尔不能正常勾选，取消

2.有分页时，最后一页数据过少会导致其他页下方数据无法选中

3.页面没加载完或暴力测试时也会不能选中

利用layui更新渲染方法和网上的一些方法去解决后极大的减少了无法选中的情况，但是暴力测试时偶尔还会出现，实在不知道什么原因，所以就用了一个折中的方法——自己写一个复选框

<!--原有layui复选框--> <td> <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div> </td> <!--替换为自己写的--> <td> <div a="off" class="checkBox" v-bind:data-id='x.Id' v-on:click="checkBox(i)"> <div></div> </div> </td>

自己写的同样支持vue绑定事件，并且支持单个选中、取消，全选和取消

//单个的选中取消 checkBox:function(n){ var checkbox = $('tbody tr').eq(n).find('.checkBox'); if (checkbox.attr("a") == "off") { checkbox.children("div").css({ "display" : "block" }); checkbox.attr("a","on"); }else { checkbox.children("div").css({ "display" : "none" }); checkbox.attr("a","off"); } }

//全选取消 checkBoxAll:function(){ var obj = $('thead').find('.checkBox'); if ($(obj).attr("a") == "off") { $('.checkBox div').css({"display" : "block"}); $('.checkBox').attr("a","on"); }else { $('.checkBox div').css({"display" : "none"}); $('.checkBox').attr("a","off"); } }

全选或者选中其中几个，获取对应id，删除或进行其他操作

function getId() { var obj = $("tbody .checkBox"); var arr=''; obj.each(function(index, el) { if(obj.eq(index).attr("a") == "on"){ arr += obj.eq(index).attr('data-id')+ ',' } }); return arr; }

以上这篇解决layui动态加载复选框无法选中的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。