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 相关文章推荐
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
vue+element实现打印页面功能
May 20 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 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
解析MySql与Java的时间类型
2013/06/22 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
php接口技术实例详解
2016/12/07 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python gdal安装与简单使用
2019/08/01 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Python super()函数使用及多重继承
2020/05/06 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
学校校庆演讲稿
2014/05/22 职场文书
室内趣味活动方案
2014/08/24 职场文书
会计工作总结范文2014
2014/12/23 职场文书
2014企业年终工作总结
2014/12/23 职场文书
个人先进事迹材料
2014/12/29 职场文书