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基于ajax编辑信息用法实例
Jul 15 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
VUE递归树形实现多级列表
Jul 15 Vue.js
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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JavaScript 函数的执行过程
2016/05/09 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
跟老齐学Python之永远强大的函数
2014/09/14 Python
python 异常处理总结
2016/10/18 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python实现Linux中的du命令
2017/06/12 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
世界读书日的活动方案
2014/08/20 职场文书
委托书格式范文
2015/01/28 职场文书
2015年复活节活动总结
2015/02/27 职场文书
高一英语教学反思
2016/03/03 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
Python中字符串对象语法分享
2022/02/24 Python