`
SwordShadow
  • 浏览: 271437 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

表单中的readonly与disable的区别

阅读更多

jquery设置元素的readonly和disabled

 

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属性

 

 

总结:

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

 

共同点:都不能编辑和获取焦点。

readonly:使用表单post或get传递时会被传递出去。

 

disable:使用表单post或get传递时不会被传递出去。

但是readonly的显示效果是没有灰化的。

 

所有控件都有disabled 属性,但是不一定有readonly属性;点击被readonly掉的按钮照样可以触发事件,但是被disabled掉的按钮就无法使用了不管上面有没有事件。

 

小技巧: 可以给readonly设置一个css样式:

style="background-color:#cccccc;" 

这样readonly的显示效果就和disable一样了

 

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

 

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

 

参考:Readonly和Disabled的区别   

分享到:
评论

相关推荐

    表单中Readonly和Disabled的区别详解

    在HTML表单中,`readonly` 和 `disabled` 是两个重要的属性,它们都可以用来限制用户对表单元素的交互,但它们之间的区别在于作用范围、提交表单时的行为以及用户体验等方面。 首先,`readonly` 属性主要用于`...

    浅谈html中input只读属性readonly和disable的区别

    总的来说,`readonly`和`disabled`在HTML表单中提供了不同程度的用户交互限制,选择哪个属性取决于你希望用户如何与表单数据互动以及在提交表单时是否需要包含这些数据。理解它们之间的差异对于构建功能完整且用户...

    readonly和disabled属性的区别

    在表单元素中,readonly和disable有类似之处,因为它们都可以将一些表单元素设置为”不可用”状态,当然它们之间的区别是巨大的,下面就介绍一下这个两个属性有哪些区别,希望能够给需要的朋友带来一定的帮助。...

    html form表单input使用disabled后提交不能获取表单值的解决方法

    form表单输入框input设置disable属性提交后,得不到该输入框的值,解决该类问题可以参考下面两个方法: 方法一: 使用readonly带替代disabled,即把 disabled="disabled" 修改为 readonly="readonly" 二者区别: ...

    设置disabled属性后台读不到数据如何让select支持readonly

    在HTML表单中,`disabled`属性用于禁用表单元素,使得用户无法与之交互。然而,一个常见的问题是,当`disabled`属性被设置在`<select>`元素上时,后台程序在提交表单时可能无法获取到选中的选项值。这是因为`...

    如何提交表单中disabled表单域的值示例代码

    在HTML表单中,`disabled`属性用于禁用表单元素,使得用户无法与之交互,同时,浏览器默认不会在提交表单时包含这些被禁用(disabled)的元素的值。这在某些情况下可能会造成不便,特别是当需要将这些值一并发送到...

    elementUI 设置input的只读或禁用的方法

    只读:readonly 在data里定义:readonly: true, 然后在input框里加上readonly就可以了。 禁用:disabled 在data里定义:edit: true, 然后在input框里加上::disabled=”edit”就可以了 PS:下面看下elementui...

    设置checkbox为只读(readOnly)的两种方式

    在网页表单设计中,有时候我们希望用户能够看到checkbox(复选框)的状态,但不允许他们修改这些状态,这时就需要将checkbox设置为只读。尽管HTML标准中并未提供直接的`readOnly`属性来实现这一功能,但我们可以通过...

    关于html的表单元素详解(二)

    value 属性 value 属性规定输入字段的初始值: <form action=""> <input type="text" name="name" value="软件开发网"> ...readonly 属性 readonly 属性规定输入字段为只读(不能修改): ...disable

    js css面试题

    3. Form中的Input属性`readonly`和`disable`的区别: - `readonly`:只读属性,用户无法修改输入框的值,但可以选中、复制和高亮显示内容。 - `disable`:禁用属性,不仅阻止用户编辑,还禁止选中、复制和高亮显示...

    C# 批量设置WinForm界面上的所有控件不可编辑

    当窗体内的控件存在[ReadOnly]属性时,只设置[ReadOnly]属性,否则设置[Enabled]属性 方法中,List参数提供时,代表不修改其可编辑性,保持其状态为原始的可编辑或不可编辑 List, Boolean>>参数,布尔值表示是否...

    Vue+ElementUI实现表单动态渲染、可视化配置的方法

    Vue+ElementUI实现表单动态渲染、可视化配置的方法 本文主要介绍了使用 Vue+ElementUI 实现表单动态渲染、可视化配置的方法。该方法可以实现动态渲染表单、可视化配置,满足不同场景下的需求。 一、动态渲染的概念...

    使用jQuery设置disabled属性与移除disabled属性

    本文将详细介绍如何使用jQuery来设置和移除HTML表单元素的`disabled`属性,同时阐述`readonly`与`disabled`之间的区别,并提供相应的jQuery代码示例。 ### readonly属性和disabled属性的区别 1. `readonly`属性只...

    javaScript面试精选

    form中的input可以设置为readonly和disable,请问2者有什么区别?** - **`readonly`**: 表示该字段不可编辑,但仍可选中和复制内容,表单提交时会包含这个字段的值。 - **`disabled`**: 表示该字段不可编辑且不可...

    javaee英语单词文档整理.pdf

    `<form>`标签用于创建表单,`<input>`定义输入框,可以设置只读(readonly)或禁用(disable)状态。表单的action属性定义提交动作,method属性指定请求方法,如GET或POST。 CSS(层叠样式表)是用于控制网页外观的...

    js常用面试题

    4. `readonly`和`disable`的区别? `readonly`使输入框不可编辑,但用户仍然可以选择和复制文本,提交表单时,该值会被发送到服务器。`disabled`则完全禁用输入框,用户无法编辑、选择或复制文本,提交表单时,该值...

    比较简单的javascript实现input双击后可以编辑

    - **使用场景**:此功能特别适用于那些需要用户偶尔编辑的界面,例如在线文档编辑器或数据表单中的字段,可以在一定程度上避免用户误操作。 - **扩展功能**: - **输入验证**:可以在`onchange`事件中添加验证逻辑...

    jquery中EasyUI使用技巧小结

    该组件是创建动态表单、搜索功能和数据选择界面的理想选择。 一、禁用combobox里面的输入框 在某些场景下,可能需要禁用combobox组件的输入功能,只保留下拉列表供用户选择。可以通过以下两种方式实现: 第一种...

Global site tag (gtag.js) - Google Analytics