最近在使用layui+laravel做一个后台,发现layui的switch开关组件存在一个比较严重的bug,layui开关使用的是原生checkbox实现的,效果如下:
代码片段如下:
<div class="layui-form-item">
<label class="layui-form-label">导航</label>
<div class="layui-input-block">
<input type="checkbox" name="is_show" value="1" checked class=" " lay-skin="switch" lay-text="是|否">
</div>
</div>
我们知道,原生checkbox只有在checked状态时值才会被浏览器提交到后台,未checked时值不会被浏览器提交。
去百度了半天,常用的大概有这么两种解决方案:
- 添加js监听开关组件,并对组件值做处理
- 在后台入库的地方做判断,如果没有传值,就设置is_show=0
这2种方案或多或少存在着一些问题,比如,当这个组件被封装成一个component时,监听代码应该写在组件里还是主模板里?同一个页面如果有多个switch组件,是分别监听还是统一监听?后台入库方法是批量写入时,要对这(些)个字段单独处理?
经过一番深思,最后这样解决了:
在checkbox的上一行加个hidden,name和checkbox的name同名,值为0,代码片段如下:
<div class="layui-form-item">
<label class="layui-form-label">导航</label>
<div class="layui-input-block">
<input type="hidden" name="is_show" value="0">
<input type="checkbox" name="is_show" value="1" checked class=" " lay-skin="switch" lay-text="是|否">
</div>
</div>
- 当在【关】状态时,提交时会把is_show=0提交过去
- 当在【开】状态时,提交时会把is_show=0和is_show=1都提交过去
由于这个checkbox的name结尾没有[],PHP不会当做数组处理,只保留最后的一个is_show=1,问题完美解决。