LayUi使用switch开关,动态的去控制它是否被启用的方法


Posted in Javascript onSeptember 21, 2019

layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用。当时如果当前记录的某个值没有进行填写,这行记录就不能被启用。并且页面上也要让他不能进行操作。  

直接上代码:

// 页面状态栏事件监听
  form.on('switch', function (data) {
    var swithcData = data;
    var id = data.value;// 获取要修改的ID
    var state = this.checked ? '0' : '2';// 当前状态值
    $.ajax({
      url: '/adChannelConfig/editState',
      data: {
        "id": id,
        "state": state
      },
      error: function (data) {
        console.log(data);
        layer.msg('数据异常,操作失败!');
      },
      // 修改失败,请填写对应的参数
      success: function (data) {
        if (data.data) {
          layer.msg('操作成功!');
        } else {
          layer.msg(data.msg);
          var em = $(swithcData.othis[0]);
          swithcData.othis[0].classList.remove('layui-form-onswitch');
          em.children('em').text('停用');
        }
      }
    });
  });

当后台发送添加失败的数据过来的时候,走的下面的else,我们把当前DOM对象用一个变量 swithcData 去接收,这个时候去删除到它的class属性。这个是来控制layui的switch的页面显示。

dom中的0里面,需要点击那个0才能实现,而数字型的属性名不能用“.”来获取,故写成[0]。

以上这篇LayUi使用switch开关,动态的去控制它是否被启用的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 #Javascript
Vue登录主页动态背景短视频制作
Sep 21 #Javascript
layui table 获取分页 limit的方法
Sep 20 #Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 #Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 #Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 #Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 #Javascript
You might like
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
php中 $$str 中 "$$" 的详解
2015/07/06 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
使用PHP反射机制来构造"CREATE TABLE"的sql语句
2019/03/21 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
js实现下一页页码效果
2017/03/07 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
应届生简历自我评价
2015/03/11 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python
python中validators库的使用方法详解
2022/09/23 Python