Layui + Jinja2 动态 checkbox 回显选中状态

用 Layui 的 form.val 给 checkbox 赋值时，静态 HTML 没问题；但 checkbox 由 Jinja2 动态生成后，form.val 的动态 key 不生效。本文记录踩坑过程和最终解法。

官网的例子 https://www.layui.com/demo/form.html

静态 checkbox 的用法

<div class="layui-input-block">
    <input type="checkbox" name="like[write]" title="写作">
    <input type="checkbox" name="like[read]" title="阅读" checked="">
    <input type="checkbox" name="like[game]" title="游戏">
</div>

layui.$('#LAY-component-form-setval').on('click', function(){
  form.val('example', {
    "like[write]": true //复选框选中状态
  });
});

动态生成时的问题

如果此时 input 是动态生成的，比如这样：

<div class="layui-input-inline" style="width:260px">
    {% for role in roles %}
    <input type="checkbox" name="role[{{ role.role_name }}]" value="{{ role.role_name }}" title="{{ role.role_name }}">
    {% endfor %}
</div>

如果用这样的写法，发现不好用；在浏览器里 debug 后发现，key 被直接当做字符串传下去了，并没有翻译成真正的值，真是坑。

var arr = data['roles'].split('#');
$("input").prop("checked",false);
$.each( arr, function( index, value ) {
    key = "role["+value+"]";
    form.val('example', {
      key: true //复选框选中状态
    });
});

解法

所以只能改成这样的写法，用选择器点击上，但是样式没有发生变化，检查页面发现，checkbox 的按钮实际上已经显示 checked 了。

var arr = data['roles'].split('#');
$("input").prop("checked",false);
$.each( arr, function( index, value ) {
    key = "role["+value+"]";
    $("input[name='"+key+"']").prop("checked",true);
});

查了文档后发现，只要重新渲染一下就可以了。

https://www.layui.com/doc/base/faq.html#form

form.render('checkbox');

总结

动态 checkbox 不能用变量作 form.val 的 key，改用 jQuery 选择器设置 checked 后，记得调用 form.render('checkbox') 刷新 Layui 样式。