javascript 设置input和select 框只读属性 获取disabled后的值并传给后台

本文详细解析了HTML中input元素的只读(readonly)与禁用(disabled)属性的区别及应用场景,包括如何通过JavaScript动态控制这些属性,确保在特定情况下既能保持元素的不可编辑状态又能正常传递其值。

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

document.getElementById("input").readOnly=true;  //O应大写

input只读属性
有两种方式可以实现input的只读效果:disabled 和 readonly。
自然两种出来的效果都是只能读取不能编辑,可是两者有很大不同。
Disabled说明该input无效,及其value不会传递给任何程序,比如asp、php等。
Readonly仅仅是无法编辑,不影响其值的传递。
Disabled使用:<INPUT type=”text” name=”username” value=”james”disabled>
Readonly使用:<INPUT type=”text” name=”partNumber” value=”1500″ readonly>


disabled方式若要传值,可以添加隐藏的input标签 <input name="hiddenplanyear" id="hiddenplanyear" type="hidden" class="textfield"  value=""  /> 

js中:document.getElementById('hiddenplanyear').value = document.getElementById('planyear').value; 



根据需求,需要根据后台传来的参数,动态设置select标签是否可以选择,因此,当判断某个select应当设为只读时,使用

$('#id').attr("disabled","disabled"); 
  • 1
  • 2
  • 1
  • 2

来设置。

但是,这样设置有一个问题,标签被设置为只读之后,submit时将跳过这一标签,后台会取不到它的值。

要想设置只读的同时,允许后台取到标签的值,如果时input标签,可以使用如:

$('#id').attr("readonly","readonly"); 
  • 1
  • 2
  • 1
  • 2

的语法。

但是,select标签原先就是readonly属性的,因此,这样设置之后,还是可以修改选中项。因此,后面改了用另外一个投机取巧的方法:

载入页面时,给需要设为只读的标签添加disabled属性:

//两种方法设置disabled属性 
    $('#id').attr("disabled",true); 
    $('#id').attr("disabled","disabled"); 
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

在submit表单之前,再将标签的disabled属性移除:

//三种方法移除disabled属性 
    $('#id').attr("disabled",false); 
    $('#id').removeAttr("disabled"); 
    $('#id').attr("disabled",""); 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值