LayUI实现Checkbox复选框的单选及取消单选，即只能选一个或者全都不选

最新推荐文章于 2024-08-21 19:39:31 发布

桃花、卟换酒

最新推荐文章于 2024-08-21 19:39:31 发布

阅读量5.9k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/aszhaozilong123/article/details/91956086

版权

本文介绍了如何在LayUI框架下实现Checkbox复选框的单选功能，以及管理员如何取消单选以查看所有数据。在处理过程中，需要注意使用prop而非attr来更改checkbox的状态，并且在修改后调用form.render()方法进行渲染。

摘要由CSDN通过智能技术生成

项目用LayUI进行开发，需求方提出一个范围权限控制的实现方案。在复选框只能单选的前提下，管理员可以取消勾选，查看所有数据，但普通用户由于权限限制，不可以取消勾选。

在查找资料的过程中，发现jq的常用操作checkbox方法不适用于layui，应使用prop代替attr改变checkbox状态。

<input type="checkbox" name="chbBtn" value="@item.ScopeExtand" title="@item.name" lay-skin="primary" lay-filter="oneChoose">
              

form.on('checkbox(oneChoose)', function (data) {                
                if (@ViewBag.Islimited.ToString().ToLower() == true) {  //权限限制不能全部取消勾选
                    $("input[name='chbBtn']").prop("checked", false);   //全部取消选中
                    $(this).prop("checked", true);                      //勾选当前选中的选择框
                }
                else {