【解决办法&原因】input标签中加入disabled属性后数据无法传入后台

最新推荐文章于 2024-11-04 09:53:22 发布

原创最新推荐文章于 2024-11-04 09:53:22 发布 · 4k 阅读

7 ·

CC 4.0 BY-SA版权

宁波实习专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在HTML表单中使用disabled和readonly属性的差异，指出disabled元素不会参与表单提交，而readonly元素则会。文章通过具体代码示例展示了如何正确设置不可编辑字段，以确保数据完整性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实现项目中修改个人信息的时候，对于个人的ID 和 username 按照我的逻辑是不能修改的
于是就在input标签中加入了disabled使之无法修改
但是按下按钮后，非但数据没有传入后台，反而相应的属性变成了null

出问题代码如下

<input type="hidden" name="bookType" value="0">
            <p>
                <span class="name-icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D：<input type="text" name="id"  disabled="true"  value="${user.id}"  >
            </p>
        <p>
            <span class="name-icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" name="username" disabled="true"  value="${user.username}"  >
        </p>

修改办法

<input type="hidden" name="bookType" value="0">
            <p>
                <span class="name-icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                I&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D：<input type="text" name="id"  readonly="true"  value="${user.id}"  >
            </p>
        <p>
            <span class="name-icon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" name="username" readonly="true"  value="${user.username}"  >
        </p>

原因

form 表单中 disabled 属性的元素不参与表单提交

disabled 和 readonly属性的区别

readonly 是要锁定这个控件，通过在界面上无法修改他（但是通过 javascript 可以修改它）。
disabled 和 readonly 有相同的地方也是可以锁定这个控件用户不能改变他的值，但是 disabled 的更彻底一些，这是要使控件完全不能使用，彻底失效，包括改变它的背景颜色（不信，你去修改一个被 disabled 掉的 input 文本框，发现这是徒劳的），如果是 checkbox 则不能选中它。
所有控件都有 disabled 属性，但是不一定有 readonly 属性，如 select 下拉框。