layui checkbox 动态展示

编写前端时发现使用公司封装的字典前端配置只能展示radio单选的按钮，想要动态展示复选框只能展示出跟官网以下方式的复选框，展示不美观。

我想展示成官网这种的样式：

但是官网是写死的，在多次尝试后我的解决方式如下：

<script type="text/html" template lay-url="train/stuTrainApply/config/list" lay-done="layui.data.done(d);">
    <div>
        <div class="layui-form layui-sy-form add" lay-filter="xy-form-roll-apply" style="margin-left: 15px;margin-right: 10px;">
			<div class="form-box">
				<p class="form-title">动态复选框</p>
				<div class="layui-form-item rowBox">
                    <div class="colBox layui-roll" style="width: 899px;">
						<label class="layui-form-label look-form-label" style="width: 70px;">请假类型<font color="red">*</font></label>
						<div class="layui-input-inline" style="width: 780px;">
							<div class=" layui-form-checkbox" style="left: 10px;">
								{{# layui.each(d.data, function(index, item){ }} 
								<input type="checkbox" name="{{item.NAME}}" title="{{item.NAME}}" value="{{item.CODE}}" lay-skin="primary" lay-filter="leaveType" id="leaveType">
								{{# }); }}
							</div>
						</div>
					</div>
                </div>
			</div>

            <div class="layui-form-item" style="margin-left: 170px;">
			    <div class="layui-input-block">
				    <button class="layui-btn" lay-submit lay-filter="saveData">保存</button>
			    </div>
		    </div>

        </div>
	</div>

</script>

<script>
	layui.data.done = function(d) {
		layui.use(['syFormUtil', 'syTableSelectUtil', 'laydate', 'upload', 'laytpl'],         function() {
			var form = layui.form;
			form.render('checkbox');

            //保存
            form.on('submit(saveData)', function(data) {
				var dd = function() {
					var labelArray = $('input[id="leaveType"]');
		            //获取input[id="labelType"]的值
		            var labels = [];
		            for (k in labelArray) {
		                if (labelArray[k].checked) {
		                //获取所有选中的复选框，并将其值放入数组中
		                    labels.push(labelArray[k].value);
		                }
		            }
		            var leaveType="";
                    //将结果用逗号分割
		            for(let i=0;i<labels.length;i++){
						if(i==0){
							leaveType = leaveType+labels[i];
						}else{
							leaveType = leaveType+","+labels[i];
						}
					}
		            //替换 data.field.leaveType的数据
		            data.field.leaveType=leaveType;
		            var url = "train/stuTrainApply/post";
		            var done = function (success, message, data) {
		                layui.syDialogUtil.msg(message, function () {
		                    if (success) {
		                        layui.syTableUtil.reloadTable();
		                        layui.layer.close(d.params.index);
		                    }
		                });
		           };
		           layui.syReqUtil.sendAjaxByJson(url, "post", data.field, done);
				}
				layui.syDialogUtil.confirm("确认要保存吗?", dd);

			});

            //监听复选框
            form.on('checkbox(leaveType)', function(d) {
				console.log("check:"+d.value);
				var elem = d.elem; // 获得 checkbox 原始 DOM 对象
			    var checked = elem.checked; // 获得 checkbox 选中状态
			    var value = elem.value; // 获得 checkbox 值
			    var othis = d.othis; // 获得 checkbox 元素被替换后的 jQuery 对象
			});
        })
	}
</script>

调用的接口返回值为：

{
    "success": true,
    "message": "操作成功!",
    "code": 200,
    "result": [
        {
            "CODE": "1",
            "OVERID": "",
            "EXTRAID": "",
            "NAME": "早锻炼"
        },
        {
            "CODE": "2",
            "OVERID": "",
            "EXTRAID": "",
            "NAME": "课间操"
        }
    ],
    "timestamp": 1713517533670
}

以上仅个人解决方式，仅供参考