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使用animate创建动画用法实例
Aug 07 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
webpack css加载和图片加载的方法示例
Sep 11 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生成短域名函数
2015/03/23 PHP
深入理解PHP中的count函数
2016/05/31 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
制作特殊字的脚本
2006/06/26 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python将字符串转换成数组的方法
2015/04/29 Python
Python中动态创建类实例的方法
2017/03/24 Python
Python 登录网站详解及实例
2017/04/11 Python
python实现拓扑排序的基本教程
2018/03/11 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
公司任命书模板
2014/06/06 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
工作经历证明书范文
2014/11/02 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
2015教师节通讯稿
2015/07/20 职场文书
员工试用期工作总结
2019/06/20 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python