readonly与disabled的区别

程序员文章站 2022-05-02 12:11:18

一. 范围不同 readonly 只对和

标签有效 disabled 对所有表单元素都有效, 包括：<input>, <textarea>, <button>, <label>, <option>, <select>等 二. 程度不同 readonly 只是将 ......</div>
					<div class="content">
						<h2>一. 范围不同</h2>
<p>readonly 只对 <input> 和 <textarea> 标签有效</p>
<p>disabled 对所有表单元素都有效, 包括：<input>, <textarea>, <button>, <label>, <option>, <select>等</p>
<h2>二. 程度不同</h2>
<p>readonly 只是将元素设置为只读，不可输入，对其它操作没有影响</p>
<p>disabled 阻止元素的一切操作。包括 获取焦点，点击事件等</p>
<h2>三. 表单提交</h2>
<p>readonly 只是将元素设置为只读，不影响表单提交</p>
<p>disabled 设置了该属性的表单元素，值将不会随着表单一起提交</p>
<h2>四. javascript操作</h2>
<p>设置了readonly和disabled的表单元素，用户无法再界面上改变它的值。但通过javascript是可以改变其值的，同样背景色，字体颜色等也可以通过javascript来改变。</p>
<p>例如：下面的代码运行在chrome浏览器中时，点击“点我”后两个input框的字体颜色、背景色，值都会发生变化。</p>
<div class="cnblogs_code">
<pre class="brush: html;">$('input').attr("readonly","readonly") //将input元素设置为readonly  
$('input').removeattr("readonly"); //去除input元素的readonly属性  
 或
$('input').attr("readonly",true)
$('input').attr("readonly",false)
$('input').val ('1')   // 设置input的值<br>注: 使用表单post或get传递时会被传递出去</pre>
</div>
<div class="cnblogs_code">
<pre class="brush: html;">$('input').attr("disabled","disabled") //将input元素设置为readonly  
$('input').removeattr("disabled"); //去除input元素的readonly属性  
 或
$('input').attr("disabled",true)
$('input').attr("disabled",false)
$('input').val ('0')   // 设置input的值<br><br>注: 使用表单post或get传递时不会被传递出去</pre>
</div>
<p> </p>					</div>
																				<div class="info-pre-next">
						<p>
							上一篇：							<a href="/article/824456.html">
								关于JqueryEasyUI的使用介绍							</a>
						</p>
						<p>
							下一篇：							<a href="/article/824458.html">
								js学习之路1 初识js函数							</a>
						</p>
					</div>
															<div class="wz_tuijian">
						<p>
							推荐阅读						</p>
						<ul>
														<li>
								<a href="/article/2249000.html" target="_blank" title="解析JAVA深度克隆与浅度克隆的区别详解">
									<h2>
										解析JAVA深度克隆与浅度克隆的区别详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2248678.html" target="_blank" title="解析WeakHashMap与HashMap的区别详解">
									<h2>
										解析WeakHashMap与HashMap的区别详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2247827.html" target="_blank" title="小米空气净化器抄袭门  巴慕达空气净化器与小米的区别">
									<h2>
										小米空气净化器抄袭门  巴慕达空气净化器与小米的区别									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2246197.html" target="_blank" title="浅谈Android onTouchEvent 与 onInterceptTouchEvent的区别详解">
									<h2>
										浅谈Android onTouchEvent 与 onInterceptTouchEvent的区别详解									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2246113.html" target="_blank" title="Android中gravity与layout_gravity的使用区别分析">
									<h2>
										Android中gravity与layout_gravity的使用区别分析									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2245829.html" target="_blank" title="node全局变量__dirname与__filename的区别">
									<h2>
										node全局变量__dirname与__filename的区别									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2245438.html" target="_blank" title="python3 与python2 异常处理的区别与联系">
									<h2>
										python3 与python2 异常处理的区别与联系									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2244859.html" target="_blank" title="C#中out参数、ref参数与值参数的用法及区别">
									<h2>
										C#中out参数、ref参数与值参数的用法及区别									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2244786.html" target="_blank" title="基于Java多线程notify与notifyall的区别分析">
									<h2>
										基于Java多线程notify与notifyall的区别分析									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2244014.html" target="_blank" title="sqlserver存储过程中SELECT 与 SET 对变量赋值的区别">
									<h2>
										sqlserver存储过程中SELECT 与 SET 对变量赋值的区别									</h2>
								</a>
							</li>
													</ul>
					</div>
									</article>
			</div>
            			
		</main>
		<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer>	</body>
	</html>