表单无法提交设为disabled的input

本文介绍了一种在前端开发中使readonly字段看起来像disabled字段的方法,通过CSS调整样式,使其既不能被编辑又能正常传递值。

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

表单无法提交设为disabled的input

问题

还是在写那个小工程的时候,有一些更新到数据,需要在表单中重新填写提交,而一些不能更新的字段,起初我设置为disabled了,结果发现,设为disabled的字段的值,传不到后台,上网搜索之后明白,表单的确是这样设计的,而和我有一样需求的人,提出的修改方案是将desabled改为readonly,这样,一样不能对字段进行操作,但是后台可以获取到数据.但是readonly的默认样式和一般input一样,看不出啥区别,所以我想再改进下.

解决方法

首先,不可修改的字段,是要修改为readonly的,除此之外,我们对readonly的样式做一些处理,让它看起来和disabled有差不多的形式

input[readonly]{
    background-color:#cccccc;/*背景变灰*/
    cursor:not-allowed;/*鼠标为禁用样式*/
}

这样,仿disabled的样式,看起来就更清楚一些.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值