正确答案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. PHP.40-TP框架商城应用实例-后台15-商品属性与库存量1-不同商品(唯一属性、可选属性),属性类型

    思路: 1.不同商品属于不同的类型,如:手机.服装.电脑等类型 2.不同的类型有不同的属性,其中分为唯一属性和可选属性,如服装:可选属性{尺寸:S,M,L……;颜色:白色,黑色……}唯一属性:材质 首 ...

  2. bootstrap重新设计checkbox样式

    文章采集于: https://www.cnblogs.com/GumpYan/p/7845445.html#undefined 在原文基础上修改了勾勾的内容,直接采用bootstrap字体库.修改了横 ...

  3. 6 wireshark 安装使用 数据包抓取

    1.wireshark安装 2.开始使用 3.界面详情 4. 数据包抓取 5.过滤数据

  4. Mac上配置Cocos2d-x开发环境(多平台:Android/iOS)

    下载以下资源: Cocos2d-x (http://www.cocos2d-x.org) Android NDK(http://developer.android.com/tools/sdk/ndk/ ...

  5. Linux-Shell脚本编程-学习-3-Shell编程-shell脚本基本格式

    前面两篇文章基本介绍了一部分linux下的基本命令,后面还需要大家自行了解下linux的文件系统的磁盘管理部分,这里就不在写了. 什么是shell编程,我也解释不来,什么是shell脚本了,我理解就是 ...

  6. Python简要标准库(5)

    hashlib Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 基本的生成MD密匙的函数 import hashlib md5 = hashlib.md5() md5.up ...

  7. create subnet

    子网相关功能点: 模块 功能 描述 备注 子网 创建子网 创建一个子网   设置子网网段范围   设置子网网关IP/不开启网关   给子网开启/关闭dhcp   设置子网dns   修改子网 修改子网 ...

  8. Python 学习笔记之—— PIL 库

    PIL,全称 Python Imaging Library,是 Python 平台一个功能非常强大而且简单易用的图像处理库.但是,由于 PIL 仅支持到Python 2.7,加上年久失修,于是一群志愿 ...

  9. Linux 简单socket实现UDP通信

    服务器端 #include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sy ...

  10. 并查集——poj1703(带权并查集入门)

    传送门:Find them, Catch them 题意:警察抓获N个罪犯,这些罪犯只可能属于两个团伙中的一个,现在给出M个条件(D a b表示a和b不在同一团伙),对于每一个询问(A a b)确定a ...