解决Layui的switch样式显示问题
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样式显示问题的更多相关文章
- nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常
nginx js.css.图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常 http://upstreamname:port/....../. ...
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- bootstrap异步加载树后样式显示问题
整个过程: 1.先加载整个页面 2.通过jquery异步请求后台返回数据 3.循环遍历数据,拼接需要的内容 4.把拼接好的数据加载到页面中. 问题: 把拼接好的内容加载到页面后,样式显示不正确.而如果 ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- 解决 PHPExcel 长数字串显示为科学计数
解决 PHPExcel 长数字串显示为科学计数 在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号. ...
- 解决dede搜索页面只能显示10条信息解决方案
解决dede搜索页面只能显示10条信息解决方案,感觉显示的信息太少,这时就要想办法去解决一下.看看有什么好办法来解决一下这个问题. dede搜索页模板中,默认只能显示10条记录. 打开dede搜索页模 ...
- 解决每次打开office 2010显示正在配置的问题
解决每次打开office 2010显示正在配置的问题 OFFICE 2010 MSDN版出来后,下载安装 ,启动后发现每次打开都会出现“正在配置”的进度,删除重装亦不成功,对SETUP.EXE改名也不 ...
- 编码问题导致样式显示在IE中不正常
今天在做项目的时候,遇到样式显示不正常的问题,结果是因为用系统自带的notepad编辑器编辑文件时,编码格式被更改了.我们需要在Notepad++中,将编码格式改成Encode inUTF8 with ...
- 解决django关于图片无法显示的问题
http://python.usyiyi.cn/django/index.html http://m.blog.csdn.net/blog/qingyuanluofeng/44877399 http: ...
随机推荐
- iview组件DatePicker type="datetimerange绑定初始默认时间值
使用::value="[this.startTime,this.endTime]",绑定当天时间 如下: <DatePicker type="datetimeran ...
- php array数组(第一部分)
创建一个数组 <?php $arr = array("My","name","is","zhangsan"); e ...
- Codeforces Round #401 (Div. 2)【A,B,C,D】
最近状态极差..水题不想写,难题咬不动..哎,CF的题那么简单,还搞崩了= =.真是巨菜无比. Codeforces777A 题意:略. 思路: 构造出3!次变换,然后输出就好. Code: #inc ...
- Unity5 AssetBundle资源管理架构设计
http://blog.csdn.net/qq_19399235/article/details/51702964 1:Unity5 资源管理架构设计(2017.4.22版本) 2:Android 热 ...
- 坑爹的 Java 可变参数,把我整得够惨。。
最近在写一个功能点,用了 Java 中的可变参数,真是把我搞得够惨.. 什么是可变参数? 就是方法参数用 Object... args 三个点形式,一个参数可以接收多个参数. 实际的代码就不帖了,来看 ...
- 搭建Windows IIS(Internet Information Server)服务器
1.找到 控制面板\程序 点击 “打开或关闭Windows功能” ,全部选上“Internet信息服务”,这里可能要等几分钟. 2.完成之后你打开C盘,在他的根目录下多出一个inetpub文件夹里面有 ...
- Kali Linux 工具清单
Kali Linux 工具清单 Information Gathering acccheck ace-voip Amap Automater bing-ip2hosts braa CaseFile C ...
- ADO学途 one day
博主在第一个demo的困苦中,略得一些见解,需要的伙伴可以get下 刚开始先创建一个程序的前端,这样对自己要实现的功能有一个直观的了解.分三 步:首先1.创建一个windows窗体.拖控件使程序接近真 ...
- Elasticsearch内存分配设置详解(转)
Elasticsearch默认安装后设置的内存是1GB,对于任何一个现实业务来说,这个设置都太小了.如果你正在使用这个默认堆内存配置,你的集群配置可能会很快发生问题.这里有两种方式修改Elastics ...
- STP-8-RSTP中的提议/同意过程
连接中断原因也可能是增加了新的链路,导致其中一台交换机重新选举根端口,最终认为新链路所连端口是根端口,RSTP在点到点链路上使用提议/同意(Proposal/Agreement)过程,让类似这种链路迅 ...