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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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 单引号与双引号的区别
2009/11/24 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
Python中is与==判断的区别
2017/03/28 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
初中班主任评语大全
2014/04/24 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
学习教师法的心得体会
2014/09/03 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
面试感谢信范文
2015/01/22 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
学校工会工作总结2015
2015/05/19 职场文书
Android存储中最基本的文件存储方式
2022/04/30 Java/Android