解决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 动态添加表格行 使用模板、标记
Oct 24 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
微信小程序实现左滑动删除效果
Mar 30 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静态文件生成类实例分析
2015/01/03 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
angular 服务随记小结
2019/05/06 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
python二叉树的实现实例
2013/11/21 Python
使用python装饰器验证配置文件示例
2014/02/24 Python
python中pika模块问题的深入探究
2018/10/13 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python日志logging模块使用方法分析
2019/05/23 Python
Otel.com:折扣酒店预订
2017/08/24 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
华为C++笔试题
2014/08/05 面试题
鲜果饮品店创业计划书
2014/01/21 职场文书
企业消防安全制度
2014/02/02 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
代办出身证明书
2014/10/21 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
贪污检举信范文
2015/03/02 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
Java 写一个简单的图书管理系统
2022/04/26 Java/Android