layui 复选框 取值 回显 及一些小bug问题

一： html里放一个框

  <div class="layui-form-item" pane>
            <label class="layui-form-label">多选方案类型</label>
            <div class="layui-input-block">
              
                <input type="checkbox" name="DXType1" lay-filter="like" title="员工" value="员工">
                <input type="checkbox" name="DXType1" lay-filter="like" title="配偶" value="配偶">
                <input type="checkbox" name="DXType1" lay-filter="like" title="子女" value="子女">
                <input type="checkbox" name="DXType1" lay-filter="like" title="父母" value="父母">
                <input type="checkbox" name="DXType1" lay-filter="like" title="不限" value="不限">
               
            </div>
        </div>

我这里是写死的静态的，如果涉及到动态的，我目前还没想，hhhh

注意：如果你是用model传值也就是 name 的值跟数据库字段相同 的话 这里的name 一点要改名，不然回显会有bug

二：这是提交到后台方法 取到多选值 并用逗号 分隔开

 form.on("submit(sub)", function (obj) {


            var zxbm = document.getElementsByName("DXType1");
            var check_val = [];
            for (k in zxbm) {
                if (zxbm[k].checked)
                    check_val.push(zxbm[k].value);
            }

            var dxtype = check_val.join(",");//这就是多选出来的值 

           



            var ta = $("#serviceTables").val();



            var user = obj.field;
            var PlanDetailImgSrc = UE.getEditor('myEditor').getContent();
            var Reamrk = UE.getEditor('myEditor2').getContent();
            var explain = UE.getEditor('myEditor3').getContent();
            var birthday = $("#birthday").val();
            var corp = $("#Dep").val();
            var note = $("#Note").val();
            //var scorp = $("#Role").val();
            var iszfa = @ViewData["zfa"].ToString();
            if (corp == "" && iszfa == "1") {

                alert('请选择公司');
                return;
            }
            //parent.layer.load(5, { shade: [0.5, "#5588AA"] });

            $.ajax({
                type: "POST",
                data: {
                    user: user,
                    //birthday: birthday,
                    PlanDetailImgSrc: PlanDetailImgSrc,
                    Reamrk: Reamrk,
                    imageUrl: imageUrl,
                    corps: corp,
                    explain: explain,
                    note: note,
                    Dxtype : dxtype //放到这传给后台
                    //scorp: scorp


                },
                url: "/Plan/SubUserDetail", //这是后台controller 
                success: function (result) {
                    layer.closeAll("loadiing");
                    if (result.Success) {
                        layer.msg(result.Message, { icon: 1 });
                        parent.layer.closeAll();
                    }
                    else {
                        layer.msg(result.Message, { icon: 5 });
                    }
                }
            })
            })

三：我这里涉及到一个需求，选中 不限 的时候 要把前面的勾选都去掉，我是这么实现的，（可能有点乱）

  form.on('checkbox(like)', function (data) { //这里的like 是 html 中 filter 自定义的
            console.log(data);　　//打印当前选择的信息

            console.log(data.value);
           


            if (data.value == "不限" && data.elem.checked==true) {

                $('input[name="DXType1"]').each(function () {

                    if ($(this).val() != "不限") {
                      
                        $(this).attr("disabled", true);
                        $(this).attr("checked", false);

                    } else {
                        $(this).attr("disabled", false);
                    }

                });

            } else {
                var a = true;
                $('input[name="DXType1"]').each(function () {
                    if ($(this).attr("checked") == true) {
                        a = false;
                    }
                })
                if (a == true) {
                    $('input[name="DXType1"]').each(function () {
                        $(this).attr("disabled", false);
                    })
                } else {
                    $('input[name="DXType1"]').each(function () {
                        if ($(this).val() == "不限") {

                            $(this).attr("disabled", true);
                           
                        }
                        else {
                           $(this).attr("disabled", false);
                        }
                    });
                }

               
            }
            layui.form.render("");//重新渲染 固定写法
        });

四：回显  最重要的来了，找了一堆 很多很多人都不管回显这个需求，难道都没有修改功能吗？有修改功能 不得回显吗？ 可太奇怪了

 var PlanInfo = '@Html.Raw(ViewBag.PlanInfo)'; //这里 ，我是在后台controller 里把 model 放到了这个viewBag 里面
        var jsonUser = JSON.parse(PlanInfo);


         
        var dtype = jsonUser.DXType.split(","); //将数据以，（逗号）分割形成数组（jsonUser.DXType是从后台获取到的数据（形如：1，2，3））

        $("[name=DXType1]:checkbox").prop("checked", false);//这一步也很重要，要先把所有勾选都清空

        if (dtype != "") {
            for (var i = 0; i < dtype .length; i++) {
               

                    $("[name=DXType1][value=" + dtype [i] + "]").prop("checked", true);
                
              

            }
        }

        layui.form.render("");

五 后台给前台返回viewBag 方法是这样写的，（给代码就给全）

 public ActionResult PlanDetail(int? userGuid)
        {

                if (userGuid == null)
            {
                return View();
            }
            using (ModelsContainer1 context = new ModelsContainer1())
            {
                XH_PlanInfo PlanInfo = context.XH_PlanInfo.FirstOrDefault(u => u.PlanId == (int)userGuid);

              
                ViewBag.PlanInfo = Newtonsoft.Json.JsonConvert.SerializeObject(PlanInfo);



                return View();
            }
        }

效果图