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

些小bug问题"/>

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();}}

效果图