解决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为未选中(关闭)

猜你喜欢

转载自www.cnblogs.com/evanmemo/p/9166870.html