由于有bootstrapSwitch开关控件是一个checkbox,就会导致在提交表单时如果没有被选中(开关打开),则向后台提交时会缺失该input对应的参数。
解决方法:
在开关的input标签下方增加一个hidden的input标签。初始化开关时默认打开,将hidden的input设置为disabled。如果切换为关闭,则将hidden的input中value属性值设置为2,同时取消disabled属性。
前端HTML代码
<div class="form-group"> <label for="firstname" class="col-sm-3 control-label">是否空闲</label> <div class="col-sm-7"> {# 为了解决checkbox不选中时不会传递该参数,每一个checkbox配一个hidden,当checkbox没选择时,设置hidden的值;当checkbox选择时,disable那个hidden #} <input type="checkbox" class="form-control" id="status" name="status" checked value="1"> <input type="hidden" class="form-control" id="status2" name="status" disabled="disabled"> </div> </div>
注意:两个input的id值不一样
js代码
// 新增时设置状态开关按钮样式 $("#status").bootstrapSwitch({ onText: "启用", // 设置ON文本 offText: "禁用", // 设置OFF文本 onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary) offColor: "danger", // 设置OFF文本颜色 (info/success/warning/danger/primary) size: "small", // 设置控件大小,从小到大 (mini/small/normal/large) onSwitchChange: function (event, state) { console.log(event, state) //监听switch change事件,可以根据状态把相应的业务逻辑代码写在这里 let status2Obj = document.getElementById("status2") if (state == true) { // 如果开关打开,则将隐藏的input设置为失效 status2Obj.setAttribute("disabled", "disabled") // 给checkbox的input框value值设为1 $(this).val("1"); } else { // 如果开关为关闭状态,checkbox为非选中状态,此时序列化form表单时缺少input对应的参数,所以要设置隐藏的的input属性 // 设置type="hidden"的input标签的value="2",用来向后端传递 status2Obj.setAttribute("value", "2") // 移除disabled属性,否则该input不可用,即不能向后端传递参数 status2Obj.removeAttribute("disabled") } } });