根据后台传递的值控制Layui中的开关状态!亲测有效
程序员文章站
2022-05-29 20:49:23
...
1,这里是html代码
此时按钮是没有checked属性的,所以默认为关闭状态
<div class="layui-form-item">
<blockquote class="layui-elem-quote layui-text" style="margin-bottom: 25px">
商品常见问题展示状态,默认为展示状态
</blockquote>
<label class="layui-form-label">是否展示<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input type="hidden" id="orgProblemStatus2" name="orgProblemStatus">
<input type="checkbox" id="orgProblemStatus" lay-skin="switch" lay-filter="switchTest" lay-text="展示|隐藏" lay-verify="required" required/>
</div>
</div>
2,这里是Js代码
这里的result.data.orgProblemStatus就是我从后台动态获取的值
if (result.data.orgProblemStatus==='隐藏'){
/**
* 当checked中的开关为关闭状态时,就无法像后台传递值,所以我自己加了一个隐藏域
* 在表单提交的时候,就可以把当前信息的状态传递到后台
*/
$("#orgProblemStatus2").val("隐藏");
}
if (result.data.orgProblemStatus==='展示'){
$("#orgProblemStatus2").val("展示");
/**
* 默认没有checked的属性,因为一旦加上这个属性,开关默认开启
* 这个地方的attr方法也有玄机,第一参数是属性名,第二个参数是属性值
* 按道理 这个checked有true 与 false ,但是我设置true却没有用,
* 只能设为空了
*/
$("#orgProblemStatus").attr('checked','');
/**
* 下面这个非常重要,刷新按钮状态!
*/
form.render('checkbox');
}
3,最后总结
基本就是这样,如果有错,还请多多指教,第一次记录遇到的问题。
我把这个应用的场景也截图把!
- 数据展示页面
- 点击修改后的页面
- 检查代码页面
- 最后记录看一下当携带参数状态为隐藏时的代码检查页面
上一篇: jQuery on()方法使用技巧详解_jquery
下一篇: 总结Python的逻辑运算符and