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 相关文章推荐
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
js jquery数组介绍
Jul 15 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
初识Javascript小结
Jul 16 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
详解Layer弹出层样式
Aug 21 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
JavaScript定时器常见用法实例分析
Nov 15 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 __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python算法学习之计数排序实例
2013/12/18 Python
Python实现的Excel文件读写类
2015/07/30 Python
Python解析最简单的验证码
2016/01/07 Python
Python连接DB2数据库
2016/08/27 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python运行DLL文件的方法
2020/01/17 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
海南地接欢迎词
2014/01/14 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
公司总经理岗位职责
2014/03/15 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL