Layui的checkbox复选框第一次点击没反应、不生效，第二次点击，信息已经错乱 解决方法

html代码：

<div class="weadmin-body">
    <form id="form1" class="layui-form">
          <div class="layui-form-item">
              <label class="layui-form-label"><span class="we-red">*</span>角色</label>
              <div class="layui-input-block">
                    {foreach $role_list as $key=>$vo }
                    <input type="checkbox" name="role_ids[]"  value="{$vo.role_id}"   title="{$vo.role_name}"  >
                    {/foreach}
              </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

JS代码：

<script>

layui.use(['form', 'layedit', 'laydate','jquery'], function() {
    var form = layui.form,
        $ = layui.jquery,
        layer = layui.layer;
    //监听提交
    form.on('submit(form_commit)', function(data) {

        
        $.ajax({
            url: "/admin/data_add_send",
            data: data.field,
            type: 'post',
            async: false,
            success: function(data) {
                if (data.status == 2) {
                    layer.msg(data.message, {
                        icon: 1,
                        time: 1000
                    }, function() {
                        parent.location.reload();
                    });
                } else {
                    layer.msg(data.message);
                }
            }
        })
        return false;
    });
});
</script>

解决方法

只需要在js form提交 上边 加一句 form render()。

完整代码如下：

<script>

layui.use(['form', 'layedit', 'laydate','jquery'], function() {
    var form = layui.form,
        $ = layui.jquery,
        layer = layui.layer;
    form.render();
    //监听提交
    form.on('submit(form_commit)', function(data) {

        $.ajax({
            url: "/admin/data_add_send",
            data: data.field,
            type: 'post',
            async: false,
            success: function(data) {
                if (data.status == 2) {
                    layer.msg(data.message, {
                        icon: 1,
                        time: 1000
                    }, function() {
                        parent.location.reload();
                    });
                } else {
                    layer.msg(data.message);
                }
            }
        })
        return false;
    });
});
</script>