form表单中有bootstrap-switch时怎么提交表单?

由于有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"  name="status" checked value="1">
        <input type="hidden" class="form-control"  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")
            }
        }
    });