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 日期时间函数(经典+完善+实用)
May 27 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
Vue中props的使用详解
Jun 15 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
PHP 中常量的知识整理
2017/04/14 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
浅谈Python中的bs4基础
2018/10/21 Python
python实现推箱子游戏
2020/03/25 Python
Python向excel中写入数据的方法
2019/05/05 Python
详解Python的循环结构知识点
2019/05/20 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
python不同系统中打开方法
2020/06/23 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
《画家乡》教学反思
2014/04/22 职场文书
环保口号大全
2014/06/12 职场文书
学党史心得体会
2014/09/05 职场文书
学校运动会广播稿
2014/10/11 职场文书
致运动员加油稿
2015/07/21 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书