解决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 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
js实现缓动动画
Nov 25 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript英文日期(有时间)选择器
2007/05/02 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
拖动时防止选中
2017/02/03 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
在django模板中实现超链接配置
2019/08/21 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
pytorch中图像的数据格式实例
2020/02/11 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
经济管理专业求职信
2014/06/09 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
JavaScript分页组件使用方法详解
2021/07/26 Javascript