HTML中,input元素的 Disabled属性 所产生的后端无法接收数据的问题

背景

今天从前端提交 form表单 数据时，发现 设置 Disabled 的 input 元素的字段数据在后端无法接收到

原因

查阅资料（来自W3school）：

disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既 不可用 ，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

注释：disabled 属性无法与 type="hidden" 一起使用。

分析

通过查阅资料发现，被 disabled 属性 修饰的input元素为 不可用 的，说明 它在form表单中是无法 提交/携带 数据的，即使它本身有 value 值

解决方法

1. 如果只是为了在前端展示时不可操作，可以将设置 input元素 的 ReadOnly 属性，相比 Disabled 属性来说，ReadOnly 做到了只读，并且在form表单提交时，可以将 自身input元素 的数据提交到后端
2. 如资料所说，通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。此方法比较繁琐，需要编写JS代码

如果觉得这篇文章对你有帮助，就给个 推荐 吧！