表单中readonly和disabled的区别

简单的来说,两者的共同点是都能够使用户不能改变表单中的内容,但是两者有微小的差别,来用于不同的场景

  • readonly只对inputtextarea有效, 但是disabled对于所以的表单元素都是有效的,包括radiocheckbox
  • 如果表单中使用的disabled那么用户是不能选择的,也就是说这个文本框是无法获取到焦点的,而readonly是可以获取到焦点,只是不能修改,为只读
  • 最重要的一点,在发送表单的时候,如果某个表单字段是disabeld,则该字段不会发送,也不会形成键值对,用jQueryserializerayyay也是一样的,可以来试一下

<input type="text" name='name' id='name' value='bob' readonly>

然后我们用jQuery的serializeArray()来获取表单中的序列化结果:

var formData = $('form[name="myform"]').serializeArray();
console.log(formData); 

这个时候的值为

[[object Object] {
  name: "name",
  value: "bob"
}]

现在把表单元素改为disabled:

<input type="text" name='name' id='name' value='bob' disabled>

然后再序列化的话,得到的结果为:

[]

由此可见,disabled是不会进行序列化和表单传值

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,207评论 3 17
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 919评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 落花心自伤,遍地黄花凉。 人去楼空散,曲曲柔断肠。
    浊酒清忧阅读 104评论 0 1