bootstraptable+iCheck單選框復選框，動態生成復選框和動態初始化選中

html代碼

<form id="addUserRoleForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="uName" class="col-sm-2 control-label" style="padding-right: 0">用戶名</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="uNmae" id="uName" placeholder="請輸入用戶名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label" style="padding-right: 0">手機號</label>
                        <div class="col-sm-10">
                            <input class="form-control" name="mobile" id="mobile" placeholder="請輸入手機號"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label" style="padding-right: 0">角色</label>
                        <div class="col-sm-10">
                            <div id="roleCheck" class="form-group"></div>
                        </div>
                    </div>
                    <!--尾部-->
                    <div class="modal-footer">
                        <button id="submitUserOfRole" type="submit" class="btn btn-primary">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                    </div>
                </form>

js代碼動態設置復選框值

//增加用戶同時分配角色
function addUserRole() {
    $("#uName").val("");
    $("#mobile").val("");
    //初始化復選框不選中
    $("input[name='roleCheck']").iCheck('uncheck');
    //打開增加用戶同時分配角色模態框
    $("#addUserRoleModal").modal("show");
}


//增加動態復選框值
function checkRole() {
    $.post("/internal/role/selectList", function (data) {
        var types = eval(data);
        for (var i = 0; i < types.length; i++) {
            $("#roleCheck").append("<label style='margin-left: 10px;'><input type='checkbox' class='form-control' name='roleCheck' value=" + types[i].id + " />&nbsp;&nbsp;" + types[i].roleName + "</label>");
        }
        //設置iCheck組件初始化
        $("input[type='checkbox']").iCheck({
            cursor: true,
            handle: 'checkbox',
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
            increaseArea: '20%'
        });
        //設置復選框默認不選中
        $("input[name='roleCheck']").iCheck('uncheck');
    });
}

js代碼設置復選框動態選中

//修改用戶角色  修改授權
function updateUserOfRole(id) {
    $("#userId").val(id);
    //通過uniqueId 獲取行數據
    var rows = $('#parameterTab').bootstrapTable('getRowByUniqueId', id);
    $("#updateName").val(rows.name);
    $("#updateMobile").val(rows.mobile);
    //清空復選框值  整個html元素清空  再重新調用方法生成
    $("#updateRoleCheck").html("");
    //加載修改角色復選框
    updateRoleCheck(id);
    //打開分配角色模態框
    $("#sysUserRoleModal").modal('show');
}

//修改用戶角色 復選框加載和綁定值
function updateRoleCheck(rowId) {
    //獲取行數據 用戶
    var userInfo = $('#parameterTab').bootstrapTable('getRowByUniqueId', rowId);
    var userInfoRoleIds = [];
    for (var item of userInfo.roleIds) {
        userInfoRoleIds.push(item.id);
    }
    $.post("/internal/role/selectList", function (data) {
        var roleList = eval(data);
        var seleted = false;
        for (var i in roleList) {
            for (var j in userInfoRoleIds) {
                if (roleList[i].id == userInfoRoleIds[j]) {
                    seleted = true;
                    break;
                }
            }
            if (seleted) {
                var str = "<label style='margin-left: 10px;'>" +
                    "<input type='checkbox' checked='checked' name='updateRoleCheck' value='" + roleList[i].id + "' />&nbsp;&nbsp;";
            } else {
                var str = "<label style='margin-left: 10px;'>" +
                    "<input type='checkbox' name='updateRoleCheck' value='" + roleList[i].id + "' />&nbsp;&nbsp;";
            }
            str += roleList[i].roleName + " </label>";

            $("#updateRoleCheck").append(str);
            seleted = false;
        }
        //設置Icheck框架
        $("#updateRoleCheck").iCheck({
            cursor: true,
            handle: 'checkbox',
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
            increaseArea: '20%'
        });
    });
}

html代碼

<div class="modal-body">
                <!-- 表單-->
                <form id="updateUserRoleForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="uName" class="col-sm-2 control-label" style="padding-right: 0">用戶名</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" readonly="readonly" id="updateName" placeholder="請輸入用戶名"/>
                            <input hidden="hidden" id="userId" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label" style="padding-right: 0">手機號</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" readonly="readonly" id="updateMobile" placeholder="請輸入手機號"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile" class="col-sm-2 control-label" style="padding-right: 0">角色</label>
                        <div class="col-sm-10">
                            <div id="updateRoleCheck" class="form-group"></div>
                        </div>
                    </div>

                </form>
            </div>
            <!--尾部-->
            <div class="modal-footer">
                <button id="submitUser" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            </div>