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

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

1
2
3
4
5
6
7
8
9
10
11
<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是动态生成的,比如这样:

1
2
3
4
5
<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被直接当错字符串传下去了,并没有翻译成真正的值,真是坑。

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

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

1
2
3
4
5
6
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

1
form.render('checkbox');
Notice: 正常情况下,这里会有一个基于utteranc.es的留言系统,如果看不到,可能需要科学上网方式。