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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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者的疑难问答(1)
2006/10/09 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
教育学专业实习生的自我鉴定
2013/11/26 职场文书
先进个人事迹材料
2014/01/25 职场文书
高三家长寄语
2014/04/03 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
三八节标语
2014/06/27 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
mysql字符串截取函数小结
2021/04/05 MySQL
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫