使用layui时，由jinja2动态生成的checkbox，如何在赋值的时候选中

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

<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');