讲师中心 微信公众号
AI工具推荐 视频效率加速

layui表单怎么在提交时把disabled禁用的字段也序列化

小瑶小哥_8109

小瑶小哥_8109

发布时间:2026-10-21 10:46:30

|

577人浏览过

|

来源于php中文网

原创

form.val() 默认不包含 disabled 字段,因遵循 HTML 规范;需在取值前临时移除 disabled 属性,调用 form.val() 后再恢复,或改用 serializeArray() 配合手动控制 disabled 状态。

layui表单怎么在提交时把disabled禁用的字段也序列化

默认情况下,form.val() 和 Layui 表单内部序列化逻辑**不会包含 disabled 字段**——这是浏览器原生行为,Layui 没有绕过它。想让 disabled 字段参与提交,必须手动干预 DOM 状态或序列化过程。

为什么 form.val() 读不到 disabled 字段

这不是 Layui 的 bug,而是 HTML 规范:所有 disabled 表单控件的值在表单提交、FormData 构造、serialize() 或 form.val() 中都会被自动忽略。Layui 的 form.val() 底层依赖原生 DOM 查询,无法突破这一限制。

  • 即使你用 JS 动态设置了 elem.value = 'xxx',只要 elem.disabled === true,form.val() 就返回 undefined 或跳过该字段
  • form.on('submit') 回调里的 data.field 同样不包含 disabled 字段,和 form.val() 行为一致
  • 别指望 form.render() 或版本升级能改变这点——它是底层约束,不是渲染问题

提交前临时启用 disabled 字段再调 form.val()

最直接可控的方式:在 form.on('submit') 开头,把目标字段的 disabled 属性临时移除,调 form.val() 取值,再按需恢复(如果 UI 还需保持禁用状态)。

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

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

下载
  • 先保存原始状态:const wasDisabled = elem.disabled;
  • 临时启用:elem.disabled = false;
  • 立即执行 form.val('filterName') 或触发一次 form.render('input')(确保封装组件如 select/checkbox 的值能被读取)
  • 提交后,根据需要恢复:elem.disabled = wasDisabled;;若用 form.render() 刷新了 UI,记得再调一次以同步灰显样式
  • 注意:对 select、checkbox 等封装组件,仅改原生 disabled 不够,必须配 form.render('select') 或 form.render('checkbox') 才能让值被 form.val() 读到

绕过 form.val(),用原生 DOM + serializeArray() 强制包含

如果你只需要“把 disabled 字段塞进请求”,不强依赖 Layui 的字段映射逻辑,$('form').serializeArray() 是更底层、更可预测的选择——但它默认也跳过 disabled 字段。要让它包含,得先临时移除 disabled 属性:

  • 遍历所有 input, select, textarea,收集原本 disabled 的元素:const disabledElems = $('form :input:disabled');
  • 批量移除属性:disabledElems.prop('disabled', false);
  • 调用 $('form').serializeArray() 获取全部字段(含刚才放开的)
  • 提交后,立刻恢复:disabledElems.prop('disabled', true);,并视情况调 form.render() 同步 UI
  • 这个方式对 name 带数组语法(如 user[addr])或动态增删行的表单更稳定,不受 Layui 内部解析逻辑影响

真正容易被忽略的点

很多人试了“设 disabled → 调 render → 以为 form.val() 就能读到”,结果还是空——因为 form.render() 只负责重绘 UI 和绑定事件,**它不改变浏览器对 disabled 字段的序列化规则**。能否读到值,只取决于 DOM 元素在调用 form.val() 那一刻的 disabled 状态。时间差、异步操作、render 未完成,都会导致状态错位。最稳妥的做法永远是:在取值前那一帧,确保目标元素的 disabled 属性为 false。

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2940

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

360

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2753

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1161

2024.09.24

Playwright 测试失败怎么办
Playwright 测试失败怎么办

Playwright测试失败专题汇集超时、定位器匹配、浏览器提前关闭、依赖与插件配置、文件上传、SSL及Docker启动等故障文章,并介绍通过截图、报告和Trace定位错误。

0

2026.10.21

Playwright 页面操作指南
Playwright 页面操作指南

Playwright页面操作专题汇集元素定位、点击与输入、等待响应、多页面切换、Iframe、事件监听及文件处理的已审核文章,便于按操作场景查阅示例与常见问题。

0

2026.10.21

Playwright 入门教程
Playwright 入门教程

Playwright入门专题汇集测试框架安装、VS Code配置、录制脚本、编写首个用例、运行调试及查看报告的已审核文章,帮助初学者搭建端到端测试流程。

0

2026.10.21

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

100

2026.10.16

OpenJDK怎么配置Java开发环境
OpenJDK怎么配置Java开发环境

怎样用OpenJDK搭建开发环境?本专题介绍版本选择、下载安装、环境变量配置和编译运行验证,帮助你理清JDK的作用及基本配置流程,并通过简单程序检查环境是否可用,为后续项目开发做好准备。

80

2026.10.16

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13万人学习

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

共89课时 | 11.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn