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的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
微信小程序 开发之全局配置
May 05 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
js仿360开机效果
Dec 26 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目录与文件操作
2011/12/30 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python中virtualenvwrapper安装与使用
2018/05/20 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
pandas分组聚合详解
2020/04/10 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
会计专业求职信范文
2014/03/16 职场文书
自行车广告词大全
2014/03/21 职场文书
行政监察建议书
2014/05/19 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
实习推荐信格式模板
2015/03/27 职场文书
交通安全温馨提示语
2015/07/14 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
win7配置本地ftp服务器的图文教程
2022/08/05 Servers