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学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 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 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
详解VUE 数组更新
2017/12/16 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Django的session中对于用户验证的支持
2015/07/23 Python
python中函数传参详解
2016/07/03 Python
python 连接sqlite及简单操作
2017/06/30 Python
python中的常量和变量代码详解
2018/07/25 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python实现手绘图效果实例分享
2020/07/22 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
后进生转化工作制度
2014/01/17 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
绿色小区申报材料
2014/08/22 职场文书
关于学习的决心书
2015/02/05 职场文书
预备党员介绍人意见
2015/06/01 职场文书
法律服务所工作总结
2015/08/10 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL