Day02 Layui 动态修改switch开关值，改变开关默认存值，改变开关默认文本

动态修改switch开关值

• 1.定义一个switch开关，默认为开(checked=”checked”)

<div class="layui-form-item">
                <label class="layui-form-label">是否可用</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" name="useable" id="useable" checked="checked" lay-filter="useable">
                    <span class="help-inline">“是”代表此数据可用，“否”则表示此数据不可用</span>
                </div>
            </div>

• 2.动态修改switch开关值

将switch开发中checked属性移除，并刷新

$("#sysData").removeAttr('checked');
form.render();  //实现全局刷新,元素更新必须使用,否则没有效果
//form.render(checkbox) // 实现局部刷新，只刷新switch开关

• 3.改变switch存值

开关，若为开，则默认存值为“on”，若为关，则默认存值为“”。
当我们需要不想存为“on”或者“”时，要相应处理进行处理。

//开关
<div class="layui-form-item">
                <label class="layui-form-label">是否系统数据</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" name="sysData" id="sysData" checked="checked">
                    <span class="help-inline">“是”代表此数据只有超级管理员能进行修改，“否”则表示拥有角色修改人员的权限都能进行修改</span>
                </div>
</div>
//提交按钮
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
layui.use(['form', 'jquery', 'upload'], function() {
$ = layui.$;
var form = layui.form;
//监听提交
form.on('submit(*)', function(data) { 
//submit(*)中的 * 号为事件过滤器的值，是在绑定执行提交的元素时设定的,eg:lay-filter="*"
                    //修改开关的值on或""
                    if(data.field.sysData == "on") {
                        data.field.sysData = "1";
                    } else {
                        data.field.sysData = "0";
                    }
        });
    });

• 4.改变开关默认文本on/off

lay-text=”文本1|文本2”
eg：lay-text=”开启|关闭”

<div class="layui-form-item">
                <label class="layui-form-label">是否系统数据</label>
                <div class="layui-input-block">
                    <input type="checkbox" lay-skin="switch" name="sysData" id="sysData" checked="checked" lay-text="开启|关闭" >
                    <span class="help-inline">“是”代表此数据只有超级管理员能进行修改，“否”则表示拥有角色修改人员的权限都能进行修改</span>
                </div>
</div>