layui树形组件怎么取消勾选框

秋强酱_5546

秋强酱_5546

2026-09-09

603人浏览

原创

showcheckbox: false 是唯一正确关闭方式,需在 tree.render() 配置中显式设置并重新渲染;直接删 dom 或用 css 隐藏会导致状态机错乱、回调失效、getchecked() 异常。

layui树形组件怎么取消勾选框

不能靠 CSS 隐藏或 DOM 移除,必须关掉 showCheckbox 并重新渲染树。

直接删 DOM 或 hide 复选框会出问题

手动用 $('input[type="checkbox"]').remove()display: none 会让 layui 内部状态机错乱:oncheck 回调失效、父子联动中断、tree.getChecked() 返回空或错误数据。复选框不是独立 UI 元素,而是状态载体。

  • layui 渲染后,复选框的勾选状态和 UI 样式(如 layui-icon-triangle-r 半选图标)由内部状态驱动
  • 隐藏/删除后,tree.setChecked() 仍会尝试更新已不存在的 DOM,控制台报错且无效果
  • 后续调用 tree.render() 若没重置配置,复选框可能意外重现

showCheckbox: false 是唯一正确关闭方式

必须在 tree.render() 配置中显式设 showCheckbox: false,并触发重新渲染。这个参数是布尔值,只认 true / false,传字符串 "false" 或数字 0 无效。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 如果树已存在,先调用 tree.destroy('yourTreeId') 清理旧实例(避免多实例冲突)
  • 再用新配置重新 tree.render(),确保 showCheckbox: false 在配置对象顶层
  • 示例:
    tree.destroy('deptTree');<br>tree.render({<br>  elem: '#dept_tree',<br>  data: treeData,<br>  showCheckbox: false,<br>  id: 'deptTree'<br>});

想临时“禁用”复选框?别关,改交互逻辑

如果只是不想让用户操作,但保留勾选状态和联动能力(比如回显已选权限),就别关 showCheckbox,而是禁用点击行为:

  • 监听 .layui-form-checkbox 的 click 事件,e.preventDefault() 阻止默认行为
  • 同时加样式 .layui-form-checkbox[disabled] 视觉上灰掉(需额外补类名或内联 style)
  • 注意:不要用原生 disabled 属性——layui 不识别,UI 不变,用户仍可点

真正难的不是删复选框,而是删完之后状态没人管。layui 的树组件把 DOM、数据、事件全耦合在一起,动哪一块都得动全局配置。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2083

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4443

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5590

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5018

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

703

5

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

2026.09.23

20

15

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

2026.09.23

0

15

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

2026.09.23

0

15

Conan创建软件包配方指南
Conan创建软件包配方指南

本专题介绍通过conanfile.py创建软件包的方法,讲解包名、版本、依赖和构建设置等基础信息,以及source、build、package、package_info等常用方法的作用及编写思路。

2026.09.22

0

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.4万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 10.6万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习