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 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
node中的session的具体使用
2018/09/14 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
用Python编写web API的教程
2015/04/30 Python
有趣的python小程序分享
2017/12/05 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python lambda的使用详解
2021/02/26 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
超市营业员岗位职责
2013/12/20 职场文书
省三好学生申请材料
2014/01/22 职场文书
户外活动总结范文
2014/04/30 职场文书
安全责任书怎么写
2014/07/28 职场文书
个人总结怎么写
2015/02/26 职场文书
工作自我评价范文
2019/03/21 职场文书
导游词之阆中古城
2019/12/23 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Nginx安装配置详解
2022/06/25 Servers