表单中Readonly和Disabled的区别 -- 简明现代魔法
专注于互联网主流的各种技术
-& 表单中Readonly和Disabled的区别
表单中Readonly和Disabled的区别
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：
Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的）。
一般比较常用的情况是：
在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly。
经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。
如果说在这种情况下用readonly来代替disabled的话，若表单中只有input(text/password)和textarea元素，那还是可以的，如果存在其他发元素，比如select，用户可以在重新改写值后按回车键进行提交（回车是默认的submit触发按键）。
我们常常在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。
disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的。
如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。
小技巧：diabled可用readonly代替，background-color:#加上灰色背景色就可以。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&html xmlns="http://www.w3.org/1999/xhtml">
&meta http-equiv="Content-Type" content="text/ charset=utf-8" />
&title>Untitled Document&/title>
&form id="form1" name="form1" method="get" action="">
&input name="q1" type="text" id="q1" value="readonly" readonly="true" />
&input name="q2" type="text" disabled="disabled" id="q2" value="disabled" />
&input type="submit" name="Submit" value="Submit" />
input的字段当为diabled时时无法获取数值得，所以最近不要用这个，我们可以用readonly带替代，即可解决这类问题。
放在form表单中提交后得不到该值。
将disabled="disabled" 改为 readonly = "readonly" 即可 ,按照W3C的规范：http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.12
设置为disabled的input将会有下面的限制：
不能接收焦点
使用tab键时将被跳过
可能不是successful的
设置为readonly的input将会有下面的限制：
可以接收焦点但不能被修改
可以使用tab键进行导航
可能是successful的
只有successful的表单元素才是有效数据，也即是可以进行提交。disabled和readonly的文本输入框只能通过脚本进行修改value属性。
这两个属性在效果和使用上的区别：
readonly是要锁定这个控件，通过在界面上无法修改他（但是通过javascript可以修改他）。
disabled和readonly有相同的地方也是可以锁定这个控件用户不能改变他的值，但是disabled的更彻底一些，他是要使你完全不能使用他，包括改变他的背景颜色（不信，你去修改一个被disabled掉的input文本框，你发现你是徒劳），如果是checkbox则不能选中他。
所有控件都有disabled 属性，但是不一定有readonly属性，如select 下拉框。点击被readonly掉的按钮照样可以触发事件，但是被disabled掉的按钮就无法使用了不管上面有没有事件。
将div设置disabled属性之后，整个div都灰掉了，但是文本框里面还是可以输入内容的。注意：select下拉选择框是没有readonly属性的
大家仔细想一下会有一个问题出现，就是有时候我们写程序的时候，比如一个购买商品的页面，我们可以在上面输入商品的数量，但是价格我们设置成只读的，最后下面有一个总价格就是 数量 * 只读的价格，那么我们很可能就是这样做的，在后台的时候读取 商品数量的 textbox值，然后读取 价格的textbox的值，然后两者的积 作为总金额 uodate到数据库中去了，如果客户端的用户和我们一样是一个会点程序的小程序员，那么麻烦就有可能来拉，他可以查看源文件，查看到被readonly的价格的文本框的id或者是name什么的，然后在浏览器中输入脚本去改变价格的值，然后点提交，那么这个小程序员就可以随便怎么给自己打折都不过份啊。
我们将表单的提交方法设置成get提交，我们就可以在url里面看到提交的内容，发现被设置成disabled的控件没有提交到服务器，readonly的提交数据到服务器了。
关于用js控制disabled和readonly的问题，下面是一段参考代码：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&html xmlns="http://www.w3.org/1999/xhtml">
&meta http-equiv="Content-Type" content="text/ charset=utf-8" />
&title>无标题文档&/title>
&form enctype="multipart/form-data" action="sign.php" method="post" name="moblie_act_form" id="moblie_act_form" >
&input type="text"
class="input" id="mobile" name="mobile" value="{$mobile}"
readonly="true" disabled="disabled">
&input type="button" value="修改" onClick="modify_phone()">
&script language="javascript">
function modify_phone(){
if(confirm("您确定要修改您的手机号码吗？")){
document.moblie_act_form.mobile.readOnly =
document.moblie_act_form.mobile.disabled =
随机文章推荐
(44) (105) (232) (53) (34) (314) (39) (35) (21) (4) (1) (9) (14) (56) (66) (1) (160) (27) (57) (31) (77) (31) (12) (7) (18) (61)
注：如需转载本文，请注明出处（原文链接），谢谢。更多精彩内容，请进入首页。
你也许还会对以下文章感兴趣
喜欢本文，就分享它吧
您的名字：
您的邮件：
您的网站：
copyright (C) 2009 简明现代魔法 && 学习、分享、进步
power by Gonn 感谢所有关心和支持本站的朋友们博客分类：
Jquery的api中提供了对元素应用disabled和readonly属性的方法，在这里记录下。如下：1.readonly　　$('input').attr("readonly","readonly")//将input元素设置为readonly　　$('input').removeAttr("readonly");//去除input元素的readonly属性　　if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性
　　对于为元素设置readonly属性和取消readonly属性的方法还有如下两种：　　$('input').attr("readonly",true)//将input元素设置为readonly　　$('input').attr("readonly",false)//去除input元素的readonly属性
　　$('input').attr("readonly","readonly")//将input元素设置为readonly　　$('input').attr("readonly","")//去除input元素的readonly属性2.disabled
　　 $('input').attr("disabled","disabled")//将input元素设置为disabled　　$('input').removeAttr("disabled");//去除input元素的disabled属性　　if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性
　　对于为元素设置disabled属性和取消disabled属性的方法还有如下两种：　　$('input').attr("disabled",true)//将input元素设置为disabled　　$('input').attr("disabled",false)//去除input元素的disabled属性
　　$('input').attr("disabled","disabled")//将input元素设置为disabled　　$('input').attr("disabled","")//去除input元素的disabled属性
浏览: 49690 次
来自: 上海
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
readonly='readonly' disable='disable' ,input标签不可用，那么当他们的值为多少，input标签可以用，难道只有用js把这个属性移除吗？？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
readonly和disable都不是布尔值属性，他们属于只要声明了就会有效果的类型，不管值是多少。要把原先是不可用的input改成可用，只能是js移除该属性或者利用prop
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：当前位置:&&编程技术>
jquery设置元素readonly和disabled(checkbox只读)
&&&&来源:&互联网& 发布时间：
&&&&本文导语:&
Jquery api中提供了对元素应用disabled和readonly属性的方法：
1，readonly
$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').removeAttr("readonly");//去除input元素的readonly属性
if($('input').attr("readonly")=...
Jquery api中提供了对元素应用disabled和readonly属性的方法：
1，readonly
$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').removeAttr("readonly");//去除input元素的readonly属性
if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性
对于为元素设置readonly属性和取消readonly属性的方法还有如下两种：
$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').attr("readonly","")//去除input元素的readonly属性
2，disabled
$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').removeAttr("disabled");//去除input元素的disabled属性
if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性
对于为元素设置disabled属性和取消disabled属性的方法还有如下两种：
$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性
$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').attr("disabled","")//去除input元素的disabled属性
3，关于checkbox的（checkbox看是否为一组是用name值相同来判断的）
因为checkbox本身并没有提供readonly方法，而用了disabled会变成灰色，所以找了俩个方法
checkbox没有readOnly属性，如果使用disabled=“disabled”属性的话，会让checkbox变成灰色的，用户很反感这种样式可以这样让它保持只读：
设置：onclick="return false"
js中：checkbox.onclick=function(){};
$(function(){
$("input[type='checkbox']").click(
function(){
this.checked = !this.
4，select设置只读
使用disabled吧，没有找到类似checkbox这种方案，取值只好用hidden了。
您可能感兴趣的文章:
本站()旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。本站()站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
相关文章推荐
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！
(C)2012-,E-mail:www_169it_(请将#改为@)好像是readonly是可以往后面传递数据的,但是disabled是不可以往后面传递数据的,或者是不能修改value值的
本文已收录于以下专栏：
相关文章推荐
原文地址：/zcy_soft/archive//2181211.html
html input
readonly 和 di...
input的字段当为diabled时时无法获取数值得，所以最近不要用这个，我们可以用readonly带替代，即可解决这类问题。
  
    放在form表单中提交后得不到该值。
转载：http://www.nowamagic.net/html/html_ReadonlyAndDisabled.php
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用...
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：
Readonly只针对input(text / p...
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / pass...
表单中Readonly和Disabled的区别
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有...
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：
Readonly只针对input(text / p...
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：
Readonly只针对input(text /...
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：
Readonly只针对input(text / p...
他的最新文章
讲师：王哲涵
讲师：韦玮
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)