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

最新推荐文章于 2024-05-31 15:31:00 发布

原创最新推荐文章于 2024-05-31 15:31:00 发布 · 1.3w 阅读

CC 4.0 BY-SA版权

本文详细解析了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","");

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