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 相关文章推荐
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
vue实现分页的三种效果
Jun 23 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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
详解js异步文件加载器
2016/01/24 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
JS的replace方法介绍
2012/10/20 Javascript
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python查看列的唯一值方法
2018/07/17 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
公司清洁工岗位职责
2013/12/14 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
信息员培训方案
2014/06/12 职场文书
医院节能减排方案
2014/06/13 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
驻村工作简报
2015/07/20 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js