解决layui动态加载复选框无法选中的问题


Posted in Javascript onSeptember 20, 2019

问题描述

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动态加载复选框无法选中的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
gridpanel动态加载数据的实例代码
Jul 18 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 #Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 #Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 #Javascript
使用layui实现树形结构的方法
Sep 20 #Javascript
生成无限制的微信小程序码的示例代码
Sep 20 #Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 #Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 #Javascript
You might like
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
php实现多城市切换特效
2015/08/09 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
JavaScript 学习笔记(十五)
2010/01/28 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
Python部署web开发程序的几种方法
2017/05/05 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python模块之paramiko实例代码
2018/01/31 Python
Python字符串的修改方法实例
2019/12/19 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
工程质量承诺书
2014/03/27 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
《火烧云》教学反思
2016/02/23 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
讲解MySQL增删改操作
2022/05/06 MySQL