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. <正则吃饺子>:关于java中对内存部分的简单总结整理

    在项目和一些群讨论中,经常看到对内存的处理,但是,自己确是一知半解的,基于此,就把这部分的知识简单的整理了下,知识点来源于网络博文,也一一标明出处,谢谢. package com.love.malin ...

  2. 双击jar不能运行的解决方法

    1.问题描述     使用eclipse导出jar.双击jar文件弹出一个内容为“a java exception has occurred”的错误警告提示! 但是在命令行用 java -jar Em ...

  3. FZU2030 括号问题(dp)

    Problem 2030 括号问题 Accept: 398    Submit: 753Time Limit: 1000 mSec    Memory Limit : 32768 KB  Proble ...

  4. hdu4886 TIANKENG’s restaurant(Ⅱ) (trie树或者模拟进制)

    TIANKENG’s restaurant(Ⅱ) Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 130107/65536 K (Ja ...

  5. PHP判断用户是手机端?还是浏览器端访问?

    function isMobile(){ $useragent=isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : ' ...

  6. centos7及以上安装git服务

    检查git是否安装或者是版本 whereis git等命令来检查是否已经安装了git版本的 git --version检测到我的环境自带的git版本 已安装但不是想要的版本需要卸载 yum remov ...

  7. 解决eclipse js文件报错(转)

    在我们将项目导入Eclipse后,配置好各种编译条件.加载好jar包.配置好tomcat后发现项目还是报错,(前提是项目本身并没有错误,而是我们在初次导入到Eclipse中的时候报错),那是什么原因引 ...

  8. unity_pojie

    http://www.ceeger.com/forum/read.php?tid=23396&desc=1

  9. Android权限之三共享UID和签名

    http://blog.csdn.net/a345017062/article/details/6236263 共享UID 安装在设备中的每一个Android包文件(.apk)都会被分配到一个属于自己 ...

  10. cf808E(三分)

    题目链接:http://codeforces.com/problemset/problem/808/E 题意:给出n个体积为wi, 价值为ci的物品,背包容量为m,求能容纳的最大物品价值,其中 1&l ...