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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
Vue数据双向绑定底层实现原理
Nov 22 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
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP类的反射用法实例
2014/11/03 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
JS实现图片手风琴效果
2020/04/17 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python自动生产表情包
2017/03/17 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
工作评语大全
2014/04/26 职场文书
百日安全生产活动总结
2014/07/05 职场文书
销售竞赛活动方案
2014/08/23 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书