Layui官方文档是这么说的:

<input type="checkbox" name="xxx" lay-skin="switch">

<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>

<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">

<input type="checkbox" name="aaa" lay-skin="switch" disabled>

----------------------------------------------------------------------------------------------------

属性checked可设定默认开

属性disabled开启禁用

属性lay-text可自定义开关两种状态的文本 

设置value="1"可自定义值,否则选中时返回的就是默认的on

可是从一个页面A调到另一个页面B怎么动态设置页面B的这个check状态呢?默认将checked属性加上后,页面B加载后样式总是显示勾选状态

  <div class="layui-form-item" >
<label class="layui-form-label">启用</label>
<div class="layui-input-block" id="test">
<input type="checkbox" name="switch" lay-skin="switch" lay-text="启用|关闭" id="Isuse" value="否" checked>
</div>
</div>

这里我在JS里面判断,如果加载页面B不需要将样式显示为选中状态,那么我强制将layui-form动态生成的html的class更改成unchecked的样式,代码如下:

   if (Isuse == '是') {
$("#Isuse").attr("checked", "checked");
$("#Isuse").attr("value",'是');
}
else {
$("#Isuse").removeAttr("checked");
var x = document.getElementsByClassName("layui-unselect layui-form-switch layui-form-onswitch");
x[].setAttribute("class", "layui-unselect layui-form-switch");
var d = document.getElementsByTagName('em')[];
d.firstChild.nodeValue = '关闭';
}

默认为启用状态,如下:

令附上判断此switch选择状态代码:

  var isChecked = $("#Isuse").attr("checked") == "checked";
alert(isChecked.toString());

trur为选中(启用),false为未选中(关闭)

解决Layui的switch样式显示问题的更多相关文章

  1. nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常

    nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...

  2. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  3. bootstrap异步加载树后样式显示问题

    整个过程: 1.先加载整个页面 2.通过jquery异步请求后台返回数据 3.循环遍历数据,拼接需要的内容 4.把拼接好的数据加载到页面中. 问题: 把拼接好的内容加载到页面后,样式显示不正确.而如果 ...

  4. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  5. 解决 PHPExcel 长数字串显示为科学计数

    解决 PHPExcel 长数字串显示为科学计数 在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号. ...

  6. 解决dede搜索页面只能显示10条信息解决方案

    解决dede搜索页面只能显示10条信息解决方案,感觉显示的信息太少,这时就要想办法去解决一下.看看有什么好办法来解决一下这个问题. dede搜索页模板中,默认只能显示10条记录. 打开dede搜索页模 ...

  7. 解决每次打开office 2010显示正在配置的问题

    解决每次打开office 2010显示正在配置的问题 OFFICE 2010 MSDN版出来后,下载安装 ,启动后发现每次打开都会出现“正在配置”的进度,删除重装亦不成功,对SETUP.EXE改名也不 ...

  8. 编码问题导致样式显示在IE中不正常

    今天在做项目的时候,遇到样式显示不正常的问题,结果是因为用系统自带的notepad编辑器编辑文件时,编码格式被更改了.我们需要在Notepad++中,将编码格式改成Encode inUTF8 with ...

  9. 解决django关于图片无法显示的问题

    http://python.usyiyi.cn/django/index.html http://m.blog.csdn.net/blog/qingyuanluofeng/44877399 http: ...

随机推荐

  1. 面试题: 数据库 oracle数据库 已看1 意义不大 有用

    Oracle数据库面试题总结 2017年04月27日 22:41:44 阅读数:9271 1.SQL语句分类 DQL(数据查询语言)select DML(数据操作语言)insert.delete.up ...

  2. 3、opencv 图像显示功能

    #include <iostream>#include <opencv2/opencv.hpp>using namespace cv;using namespace std;i ...

  3. SQL Server(五)——常用函数 转

    1.数学函数:操作一个数据,返回一个结果 --取上限ceiling select code,name,ceiling(price) from car ; --取下限 floor select floo ...

  4. MySQL学习中,遇到的问题记录

    一.安装mysql时,报错:1045 原因:因为之前安装过mysql,之后再安装会出现这个问题. 解决: 删除之前的残留就好了 方法:清除mysql之前的历史残留

  5. codeforces1081G Mergesort Strikes Back【期望dp+脑洞】

    首先看这样做的特点,就是分到最后小块里的点合并上去的时候相对顺序不变,所以先加上块内逆序对的期望 合并的时候一定是一边卡住一个大值,另一边跳指针,所以把一个值向右直到有大于它的值位置的一段区间看作一段 ...

  6. poj 2769 感觉♂良好 (单调栈)

    poj 2769 感觉♂良好 (单调栈) 比尔正在研发一种关于人类情感的新数学理论.他最近致力于研究一个日子的好坏,如何影响人们对某个时期的回忆. 比尔为人的一天赋予了一个正整数值. 比尔称这个值为当 ...

  7. SpringBoot2.0 基础案例(12):基于转账案例,演示事务管理操作

    本文源码 GitHub地址:知了一笑 https://github.com/cicadasmile/spring-boot-base 一.事务管理简介 1.事务基本概念 一组业务操作ABCD,要么全部 ...

  8. DOM的学习网站 DOM是HTML和XML的编程接口

  9. Maven项目编译版本的问题和Spring中没有导入核心包

    idea中maven项目的编译: 方案1:maven的settings.xml中指定全局默认编译版本 <profile> <id>jdk-1.8</id> < ...

  10. 《SQL 进阶教程》 case:练习题1-1-1 多列数据的最大值

    select name, case when case when x > y then x else y end < z then z else case when x < y th ...