layui的selete、checkbox等动态样式处理

样式的无效主要是在表单的情况下点击不同数据重复调用页面的时候才会有这个困扰

使用checkbox的情况下
方法一（样式的更改有时正常，有时不行，非常奇怪）

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="userStatus" lay-skin="switch" lay-filter="switch" lay-text="启用|禁用" checked>
                </div>
            </div>

根据返回值修改状态

					if (data.userStatus == 1) {
                        $(".operation_user input[name=userStatus]").attr('checked', 'checked');
                        $(".operation_user input[name=userStatus]").attr('type', 'hidden').val(1);
                        var x = document.getElementsByClassName("layui-unselect layui-form-switch");
                        x[0].setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch");
                        var d = document.getElementsByTagName('em')[0];
                        d.firstChild.nodeValue = '启用';
                    } else {
                        $(".operation_user input[name=userStatus]").attr('type', 'hidden').removeAttr("checked").val(2);
                        var x = document.getElementsByClassName("layui-unselect layui-form-switch");
                        x[0].setAttribute("class", "layui-unselect layui-form-switch");
                        var d = document.getElementsByTagName('em')[0];
                        d.firstChild.nodeValue = '禁用';
                    }
                    form.render(); //更新全部

监听

        form.on('switch(switch)', function () {
            $(".operation_user input[name=userStatus]").attr('type', 'hidden').val(this.checked ? 1 : 2);

        });

方法二（试了几个页面用，没问题）

            <div class="layui-form-item">
                <label class="layui-form-label">Status</label>
                <div class="layui-input-block" id="tanousStateUpxBK">
                    <input type="checkbox" name="tanousState" lay-skin="switch" lay-filter="switch1" id="tanousStateUp" lay-text="已审核|未审核" checked>
                </div>
            </div>

					if (data.tanousState == 2) {
                        $(".up_tailno_user input[name=tanousState]").attr('type', 'hidden').val(2);
                        $(".up_tailno_user input[name=tanousState]").attr('checked', 'checked');
                        $("#tanousStateUpxBK div").addClass("layui-form-onswitch");
                        $("#tanousStateUpxBK div em").text("已审核");
                    } else{
                        $(".up_tailno_user input[name=tanousState]").attr('type', 'hidden').val(1);
                        $(".up_tailno_user input[name=tanousState]").removeAttr("checked");
                        $("#tanousStateUpxBK div").removeClass("layui-form-onswitch");
                        $("#tanousStateUpxBK div em").text("未审核");
                    }
                    form.render(); //更新全部

        form.on('switch(switch1)', function(){
            $(".up_tailno_user input[name=tanousState]").attr('type', 'hidden').val(this.checked ? 2 : 1);
        });

select的情况下

            <div class="layui-form-item">
                <label class="layui-form-label">Type</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline layui-form">
                        <select name="tnType" id="tnTypes">
                            <option value="1">公开</option>
                            <option value="2">私密</option>
                        </select>
                    </div>
                </div>
            </div>

					if (data.tnType == 1){
                        $('#tnTypes').find('option[value="2"]').removeAttr('selected');
                    } else if ((data.tnType == 2)) {
                        $('#tnTypes').find('option[value="1"]').removeAttr('selected');
                    }
                     $('#tnTypes').find('option[value='+data.tnType+']').prop('selected','selected');
                     form.render(); //更新全部

据说使用removeAttr()后再用attr()会无效，要用prop()才行，在select这里确实是，不知道第一种方法时而有效，时而无是否这个原因

        form.on('switch(switch)', function(){
            $(".operation_tailno input[name=tnState]").attr('type', 'hidden').val(this.checked ? 1 : 0);
        });

radio的情况下

<div class="layui-form-item">
   <label class="layui-form-label">状态</label>
   <div class="layui-input-block">
      <input type="radio" name="tnType" value="1" title="正常">
      <input type="radio" name="tnType" value="2" title="禁用">
   </div>
</div>

$(".detail_tailno input[name=tnType][value='1']").attr("checked", data.tnType == 1 ? true : false);
$(".detail_tailno input[name=tnType][value='2']").attr("checked", data.tnType == 2 ? true : false);

debug看的checked是加了没错，但是样式内却没显示选中，着急做其他，以后再用上的时候再研究

Layui：设置select下拉框自动选中某项

            <div class="layui-form-item">
                <div class="layui-form-label ">性别</div>
                <div class="layui-input-block">
                    <div class="layui-input-inline layui-form">
                        <select name="userSex" id="userSex">
                            <option value="">请选择性别</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                            <option value="3">保密</option>
                        </select>
                    </div>
                </div>
            </div>

var selectSex = 'dd[lay-value=' + data.userSex + ']';
$('#role').siblings("div.layui-form-select").find('dl').find(selectSex).click();

这是发现的最好用的select动态渲染方法，根据原理分析实现的
出自这里
https://blog.csdn.net/laiyuan999/article/details/79911674?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-3&spm=1001.2101.3001.4242
本文是为了总结给自己使用