解决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[0].setAttribute("class", "layui-unselect layui-form-switch");
            var d = document.getElementsByTagName('em')[0];
            d.firstChild.nodeValue = '关闭';
        }

默认为启用状态，如下：

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

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

trur为选中（启用），false为未选中（关闭）

 

转载于:https://www.cnblogs.com/evanmemo/p/9166870.html