解决layui动态加载复选框无法选中的问题
网络编程 2021-07-04 15:01www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇解决layui动态加载复选框无法选中的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
问题描述
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"></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动态加载复选框无法选中的问题就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程