当layer动态加载无法勾选多个复选框时

最新推荐文章于 2022-08-04 13:55:16 发布

狼魂豹速

最新推荐文章于 2022-08-04 13:55:16 发布

阅读量281

点赞数 1

本文链接：https://blog.csdn.net/liufeifeihuawei/article/details/105710479

版权

在这里插入图片描述

    <div class="layui-form-item layui-form-text">
    添加 layui-form-text 
===================================================
<%@page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
<%@ include file="/jsp/common.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui-v2.5.5/layui/css/layui.css" charset="utf-8">
</head>
<body>
<div id="user-tbl-layer" style="padding: 20px">
    <form id="user-tbl-form" class="layui-form layui-form-pane" >
        <input type="hidden" id="_user_id" name="_user_id" value="${_user_id }"/>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block" style="height: 30px">
                <c:forEach items="${list}" var="acc">
                    <input type="checkbox" name="id"
                           <c:if test="${acc._flag == true}">checked="checked"</c:if>
                           value="${acc._id }" lay-skin="primary" title="${acc._name }"/>
                    <div  class="layui-unselect layui-form-checkbox" lay-skin="primary">
                        <span>${acc._name }</span>
                        <i class="layui-icon layui-icon-ok"></i></div>
                </c:forEach>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" >
                    <button class="layui-btn" lay-submit lay-filter="add-user-form-submit"  style="margin-top:100px;">确定</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="<%=basePath %>js/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use([ 'jquery', 'table', 'layer', 'form' ], function() {
        // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        form.on('submit(add-user-form-submit)', function(data) {
            var i = 0;
            $.each($('input:checkbox:checked'),function(){
                if(i == 0){
                    ids = $(this).val();
                }else{
                    ids += ","+$(this).val();
                }
                i++;
            });
            data.field.id = ids;
            $.ajax({
                url : basePath + 'user/userSetRole.do',
                type : "POST",
                data : data.field,
                async:false,
                dataType : 'json',
                success : function(result) {
                    if (result.success) {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        parent.layui.table.reload('user-tbl')
                    } else {
                        layer.msg(result.msg);
                    }
                },
                error : function() {
                    console.log("ajax error");
                }
            });
            // 阻止表单跳转
            return false;
        });

    })
</script>
</body>
</html>