关于html元素disabled和readonly的介绍

最新推荐文章于 2021-06-20 12:54:49 发布

原创最新推荐文章于 2021-06-20 12:54:49 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

代码小册子同时被 3 个专栏收录

42 篇文章

订阅专栏

知识点

42 篇文章

订阅专栏

html

6 篇文章

订阅专栏

本文详细对比了HTML中readonly与disabled属性的功能差异，包括它们对控件的锁定效果、界面上的显示区别、是否能触发事件及提交数据等方面。

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

1、两个属性的外观区别。

2、readonly和disabled可以锁定控件，在界面上无法修改元素的值(但是通过javascript可以修改)。

3、基本上所有的元素都有disabled属性，但是不一定有readonly属性，比如select。

4、点击被readonly掉的按钮照样可以触发事件，但是被disabled掉的按钮就无法使用了不管上面有没有事件。

5、readonly的数据是可以提交到服务器的，disabled的数据是无法提交到服务器的。

从提交的url可以看出设置readonly元素值可以提交到服务器，但是设置disabled元素值无法提交到服务器。

示例代码：

<html>
	<head>
		<meta charset="utf-8" />
		<title>
			关于html元素的disabled,readonly 的详细分析
		</title>
	</head>
	<body>
		<form method="get" action="test.php">
		readonly：<input id="readonly" name="readonly" type="text" readonly="readonly" value="我被设置成了readonly" style="width:300px;" />
		<input type="button" value="修改readonly框的值" onclick="edit('readonly', '哈哈，我能修改设置了readonly属性元素的值')" readonly="readonly" />
		<br />
		disabled：<input id="disabled" name="disabled" type="text" disabled="disabled" value="我被设置成了disabled" style="width:300px;" />
		<input type="button" value="修改disabled框的值" onclick="edit('disabled', '哈哈，我能修改设置了disabled属性元素的值')" disabled="disabled" />
		<br />
		<input type="submit" value="提交" />
		</form>
		<script type="text/javascript">
			function edit(id, value){
				document.getElementById(id).value = value;
			}
		</script>
	</body>
</html>