正确答案B D

分析

Readonly 和 Disabled 是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:

1)Readonly只针对 input(text/password) 和 textarea 有效,而 disabled 对于所有的表单元素都有效,包括 select, radio, checkbox, button 等。

2)若输入项的 disabled 设为 true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。

而 readonly 设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

使用:

JS 

document.getElementById("xxx").disabled=true;

document.getElementById(“xxx”).setAttribute(“disabled”,”true”);

jQuey

$("#xxx").attr({ "disabled": "disabled" });

$("#xxx").removeAttr("disabled");

常见场景:

  1. 在某个表单中为用户 预填 了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly 。
  2. 经常遇到当用户正式提交了表单后需要等待管理员的信息验证,这就不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将 submit button 也 disabled 掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值就会被清除。如果说在这种情况下用 readonly 来代替 disabled 的话,若表单中只有 input (text/password) 和 textarea 元素,那还是可以的,如果存在其他发元素,比如select,用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)
  3. 我们常常在用户按了提交按钮后,利用 JS 将提交按钮 disabled 掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。

参考:html中input只读属性readonly 和 disable的区别

     js对表单设置了readonly和disabled后的区别

表单元素 disabled 和 readonly 辨析的更多相关文章

  1. 表单元素disabled禁用后不能自动提交到服务器

    表单元素disabled禁用后不能自动提交到服务器,项目中需要一个元素只展示不修改,所以把一个input元素设置成了disabled="disabled",但是提交的时候改数据值是 ...

  2. form表单元素中disabled的元素的值不会提交到服务器

    1.表单元素中disabled的元素的值不会提交到服务器,后台获取的值为null <form id="myForm" action="#" method= ...

  3. IOS-<input>表单元素只能读,设置readonly时光标仍然可见的解决办

    在HTML中,如果把一个<input>的readonly属性设置为"readonly",表示这个表单元素不能编辑. 但是,鼠标点击之后,这个表单元素还是有光标存在的. ...

  4. 9月8日HTML表单元素(form、文本、按钮、选择)

    表单元素 一.form form代表表单,功能:用于申明表单,定义采集数据的范围,也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里.<for ...

  5. HTML之表单元素

    A.表单元素都是放在<form></form>标签内的.来看看表单的属性  属性 值 描述 accept MIME_type 规定通过文件上传来提交的文件的类型 accept- ...

  6. 第六十七节,html表单元素

    html表单元素 学习要点: 1.表单元素总汇 2.表单元素解析 本章主要探讨HTML5中表单元素,表单元素用于获取用户的输入数据.   一.表单元素总汇 HTML5的表单中,提供了各种可供用户输入的 ...

  7. HTML 表单元素、 输入类型、Input 属性

    <input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...

  8. html5表单元素详解

    表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...

  9. HTML知识点总结之表单元素

    网页不可能是纯静态的,没有任何的交互功能:绝大多数的网站都有表单元素的使用.表单提供了一个浏览者和网站交互的途径,比如用户注册登录,用户留言等功能. form form元素只是一个数据获取元素的容器, ...

随机推荐

  1. 在Ubuntu Server 16.04 LTS下安装VMware Tools

    1.开启ubuntu server虚拟机 2.vmware workstation菜单项,选取虚拟机(M) --> 安装VMware Tools 3.mkdir /mnt/cdrom  #创建一 ...

  2. 关于 poorpool

    poorpool 真名 chenyixiao.是一条傻逼题都不会做的没有脑子的咸鱼. 山西省临汾第一中学 高二 sx省队里最菜的那一个进队靠暴力. 普通的理科生,曾经爱好数学,然而到了高中发现自己所谓 ...

  3. extjs/js时间校验

    //时间秒判断var re=/^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:( ...

  4. LeetCode 25 —— K 个一组翻转链表

    1. 题目 2. 解答 首先,利用快慢指针确定链表的总结点数. 偶数个结点时,结点个数等于 i * 2. 奇数个结点时,结点个数等于 i * 2 + 1. 然后将链表的每 K 个结点划分为一组.循环对 ...

  5. NO12——快速幂取模

    long long quickmod(long long a,long long b,long long m) { ; while(b)//用一个循环从右到左便利b的所有二进制位 { )//判断此时b ...

  6. 使用ValueOperations操作redis

    方法 c参数 s说明   void set(K key, V value); key :字段key value:key对应的值  设置一个key和value   void set(K key, V v ...

  7. 软工实践Beta冲刺(6/7)

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...

  8. js保留两位小数,不四舍五入

    //不进行四舍五入,保留两位小数 function getKeepTwoDecimals(val) { var newVal = (parseInt(val * 100) / 100).toFixed ...

  9. JDK源码分析 – Integer

    Integer类的申明 public final class Integer extends Number implements Comparable<Integer> { … } Int ...

  10. 搭建Hadoop环境(一)

    我用SecureCRT作为客户端,链接虚拟机做的服务器,我用的桥接,所以把主机的一个端口映射到虚拟机22端口上去,