解决Layui框架radio、checkbox、select等组件不能动态显示的办法

前言

最近在写项目时发现layui框架中对于表单模块给予了内置的一套规则，有时候我们需要在表单元素，如radio、checkbox、select等组件让其动态显示，而作者在执行全选时遇到了一个问题，就是将组件绑定点击事件之后，js修改组件的checked，但是网页中组件元素的样式并没有发生改变，相信你也遇到过这样的问题。

当然layui作者当时是这样解释的

有些时候，你的有些表单元素可能是动态插入的。这时 form 模块
的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，偷笑.gif） 但没有关系，你只需要执行
form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

参数	type(值)	描述
select	刷新select	选择框渲染
checkbox	刷新checkbox	复选框（含开关）渲染
radio	刷新radio	单选框框渲染

官方解决办法：

form.render(); //更新全部
form.render(‘select’); //刷新select选择框渲染

--------------- 作者使用后，并未见效

捷径解决办法

既然layui官方为这些组件自定义了样式，那我们可不可以在这个组建中取消layui样式，让它保留原生样式，再对他使用js进行绑定修改呢。

答案是 绝对可以

只需在对应的组件中输入 lay-ignore 属性，组件就会回到原生样式。然后现在他的动态显示也能很好的使用了，至于原生样式美观程度，这个你可以再写style去调整喽。