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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
javascript 回调函数详解
Nov 11 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
vue中render函数的使用详解
Oct 12 Javascript
JS一次前端面试经历记录
Mar 19 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
python计算圆周率pi的方法
2015/07/11 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python之消除前缀重命名的方法
2018/10/21 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
甜品店创业计划书
2014/08/14 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
自查自纠工作总结
2014/10/15 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书