标签中属性disabled和readonly的区别

最新推荐文章于 2020-10-18 15:05:06 发布
原创 最新推荐文章于 2020-10-18 15:05:06 发布 · 1.6k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#input

本文详细探讨了HTML中disabled属性与readonly属性的区别。前者不仅禁止输入且使元素变灰，并阻止通过请求获取其值；后者仅禁止输入但不影响外观，并允许通过请求获取其值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

这两个属性都会使显示出来的文本框不能输入文字，但是disabled会使文本框变灰，而且通过request.getParameter("name")得不到文本框的内容（如果有内容的话）。

 

而readonly只是使文本框不能输入文字，外观没有变化，而且通过request.getParameter("name")可以得到文本框中的内容。

对于HTML表单输入字段，disabled =“ disabled”和readonly =“ readonly”有什么区别？
asdfgh0077的博客
02-07 752
我已经阅读了一些，但是似乎找不到关于不同的浏览器如何对待事物的可靠信息。
html表单属性readonly和disabled的使用方法
09-28
这时，`readonly` 和 `disabled` 这两个属性就显得尤为重要。 1. **只读属性（readonly）** - `readonly` 属性用于设置表单元素为只读状态。这意味着用户可以看到元素中的文本，但不能修改它。当用户尝试改变只读...
Disabled和Readonly的区别
iteye_10299的博客
09-16 161
前几天做项目的时候，提交表单的时候，有几个字段是不可修改的，就将input框设置成了Disabled的，结果表单提交过程中，这几个值无法传到后台。导致这种情况的原因如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了...
表单元素的readonly与disabled的区别
songshu92的博客
09-30 407
readonly和disabled都能够做到使用户不能够更改表单域中的内容,但是它们之间微小的差别如下： 1.readonly只针对可以输入文本的input(text / password)和textarea有效，而disabled对于所有的表单元素(包括input、button、submit、select)都有效; 2.表单元素在使用了disabled后，当我们将表单以POST或GET的
表单元素中readonly和disabled区别
龟的小号的博客
09-23 824
1.作用元素： readonly只对input(type=“text”、password、number）和textarea元素有效； disabled对所有表单元素有效； 2. 表单提交： 表单会提交readonly元素，不会提交disabled元素 3. 实际使用情况： 表单中预填了某个值，不允许用户改动，但提交表单时需要传该值，此时使用readonly。 用户点了提交按钮后，需要用js把提交...
readonly和disabled属性的区别
01-19
标签的readonly和disabled属性的区别: 在表单元素中，readonly和disable有类似之处，因为它们都可以将一些表单元素设置为”不可用”状态，当然它们之间的区别是巨大的，下面就介绍一下这个两个属性有哪些区别，希望...
设置disabled属性后台读不到数据如何让select支持readonly
09-28
然而，对于`<select>`、`<input type="checkbox">`和`<input type="radio">`，`readonly`属性并不起作用，通常需要使用`disabled`属性来达到类似的效果。然而，如前所述，`disabled`会导致数据无法提交，因此需要...
html表单控件禁用属性readonly VS disabled介绍
01-21
1.给控件标签加\u4e0areadonly='readonly'属性  2.给控件标签加\u4e0adisabled='disabled'属性  例如:  <input type=text value= readonly=readonly /> <input type=text value= disabled=disabled /&...
HTML中禁用表单控件的两种方法readonly与disabled
09-28
当你在输入标签如`<input>`中添加`readonly="readonly"`，该控件将变为只读状态。用户无法通过鼠标或键盘改变其内容，但开发者可以通过JavaScript进行动态修改。值得注意的是，即使控件设置为只读，当表单提交时，该...
html的input标签disabled和readOnly属性的异同点
Thomaskui
10-28 407
共同点：disabled和readOnly都能实现input标签文本框的不可编辑和只读功能 异同点：1.disabled可以使input标签文本框变色   最重要的一点就是让input标签文本框“失效”，实质就是后台无法获取到input标签的value的真实值，而是获取到值的是null （1）   （2）   结果： 2. （1）readOnly可以使input标
css属性readonly与disabled的区别
不忘初心，方得始终
04-09 4143
一. 范围不同readonly 只对 &lt;input&gt; 和 &lt;textarea&gt; 标签有效disabled 对所有表单元素都有效, 包括：&lt;input&gt;, &lt;textarea&gt;, &lt;button&gt;, &lt;label&gt;, &lt;option&gt;, &lt;select&gt;等二. 程度不同readonly 只
input 的 disabled和readonly 及其 限制（转）
weixin_30384031的博客
05-10 108
<input name="country" id="country" size=12 value="disabled提交时得不到该值 " disabled="disabled" >放在form表单中提交后得不到该值。将disabled="disabled" 改为 readonly = "readonly" 即可按照W3C的规范：http://www.w3.org/T...
Readonly和Disabled的差异在哪里
前端小记
09-11 1093
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： 　　Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值
enabled属性、readonly属性及visible属性的区别与联系
weixin_30378311的博客
07-20 626
当这 3个 属性值为,F, 时 效果如下: enabled=.F. 可以看见 对鼠标的点击 动作（不响应鼠标的任何操作 readonly＝。f．　可以看见　对鼠标的点击动作有相应， 光标（focus) 可以移到上面 但无法改变数值 visible=.f. 根本看不到了。。。。 转载于:https://www.cnblogs.com/CarreyWu/arch...
表单中disabled和readonly的区别
sunny1660的博客
11-20 567
disabled和Readonly是用在表单中的两个属性，它们能做到的是不让用户更改表单域中的内容。但是它们之间有着细小的区别，如下：       readonly只针对input和textarea有效，而disabled对于所有的表单元素都有效，包括select、radio、checkbox、button等。       但是表单元素在使用disabled后，当我们将表单以post或ge
input属性disabled和readonly的区别（超详细的~~~~）
热门推荐
白小纯的博客
10-16 2万+
1.两种情况的写法，没什么太大的区别，两个属性而已 disabled写法：&lt;input type="text" name="aaa" value="xxx" disabled="true"/&gt; readonly写法：  &lt;input type="text" name="bbb" value="xxx" readonly=&
Readonly和Disabled的区别
cindysaj的专栏
12-02 491
Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下： Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表...
解决disabled标签内的value不能传值给服务器
水巷石子的博客
10-18 4589
disable的标签值不会传值给服务器 <input type="text" name="did" value="${dept.did}" disabled="disabled"/><br/> 解决方法 将表单中字段 disabled 用 readonly 代替即可（如有需要，可以对该表单加上灰色的背景色） <input type="text" name="did" value="${dept.did}" readonly/><br/> 可以在写一
vue2如何把el-form标签属性disabled更改
最新发布
04-02
<think>好的，我现在需要解决用户的问题：在Vue2中如何动态修改el-form标签的disabled属性。用户提到了elementUI的el-form组件，可能遇到了一些控制disabled状态的困难。根据用户提供的引用内容，特别是引用[2]，里面提到当form.disabled设置为true时，表单项的disabled=false会失效，这说明整个表单的disabled属性会覆盖单项的设置。我需要找到一种方法，既能动态控制整个表单的禁用状态，又能允许个别表单项覆盖这个状态。 首先，我应该回顾elementUI的文档，看看el-form和el-form-item的disabled属性是如何工作的。根据引用[3]，可以通过在el-input上设置readonly或disabled属性来控制单个表单项的状态。但引用[2]指出，如果整个表单的disabled为true，那么表单项的disabled设置会被忽略，这可能是因为表单的disabled属性优先级更高。 用户的需求是动态修改整个表单的disabled属性，同时可能希望某些表单项保持可编辑状态。例如，当整个表单被禁用时，某些特殊字段可能需要例外。根据引用[2]中的问题，用户发现即使单个表单项设置了disabled=false，如果表单的disabled是true，该单项仍然被禁用。这说明需要一种更精细的控制方法。 接下来，我需要考虑Vue2的响应式数据绑定。el-form的disabled属性应该绑定到一个变量，比如formDisabled，通过改变这个变量的值来动态切换整个表单的禁用状态。对于需要例外的表单项，可能需要不使用表单的disabled属性，而是单独设置每个表单项的disabled属性，这样可以绕过表单级别的控制。 但是，根据引用[3]中的示例，单个表单项可以通过:disabled="表达式"来设置自己的状态。例如，可以绑定到一个变量，或者根据条件动态计算。如果整个表单的disabled为true，但某个表单项的disabled为false，是否有效？根据引用[2]的描述，这种情况下表单项的disabled=false可能无效，因为表单级别的设置优先级更高。 那如何解决这个问题呢？可能的解决方案是：不依赖表单级别的disabled属性，而是单独为每个表单项设置disabled属性。这样，即使表单整体禁用，也可以通过控制每个表单项的disabled状态来实现更精细的控制。例如，将表单的disabled属性去掉，然后在每个el-form-item的控件上绑定自己的disabled状态。 或者，如果必须使用表单级别的disabled属性，但需要某些表单项不受影响，可能需要查找是否有其他属性或方法可以覆盖表单级别的设置。例如，可能readonly属性不受表单disabled的影响，或者使用自定义的样式或事件来绕过。 根据引用[3]中的示例，使用readonly="true"或:disabled="true"都可以实现禁用输入。但readonly和disabled在表现上有所不同，disabled的表单元素不会被提交，而readonly的会。所以需要根据实际需求选择。 回到用户的问题，用户希望动态设置整个表单的disabled属性，同时可能允许某些表单项例外。可能的解决方法是：不使用表单的disabled属性，而是通过遍历所有表单项，动态设置它们的disabled属性。或者，如果必须使用表单的disabled，那么当需要例外时，可能需要使用readonly来代替disabled，或者通过条件判断，在表单disabled为true时，某些表单项的disabled设置为false是否可行。 但根据引用[2]中的情况，当表单disabled为true时，表单项的disabled设置会被忽略。因此，可能无法通过常规方法实现。这时候，可能需要寻找替代方案，比如使用readonly属性，或者通过自定义CSS或JavaScript来手动控制输入框的状态，绕过elementUI的默认行为。 或者，可能有一个更简单的方法：在el-form上不设置disabled，而是通过一个变量动态控制每个表单项的disabled属性。例如，定义一个对象，保存每个表单项的disabled状态，然后在模板中为每个el-form-item的控件绑定对应的disabled属性。这样，可以通过改变这个对象中的值来动态控制每个表单项的状态，而不受表单级别的影响。 总结可能的步骤： 1. 在Vue实例的data中定义一个变量，如formDisabled，用于控制整个表单的禁用状态。 2. 在el-form组件上绑定:disabled="formDisabled"，以实现表单级别的禁用。 3. 对于需要例外的表单项，不依赖表单的disabled，而是在各自的控件上绑定单独的disabled属性，例如:disabled="itemDisabled"，其中itemDisabled可以根据条件计算，比如当formDisabled为true时，该表单项的disabled为false。 但根据引用[2]中的描述，这可能不起作用，因为表单级别的disabled会覆盖。因此，可能需要避免使用表单级别的disabled，而是通过其他方式统一控制所有表单项的disabled属性。 另一种方法是，使用计算属性或方法，根据formDisabled的值和其他条件，返回每个表单项的disabled状态。例如，每个表单项的disabled属性绑定到一个计算属性，该属性检查formDisabled的值，如果为true，则可能忽略，或者根据其他条件决定是否禁用。 或者，使用watch监听formDisabled的变化，当formDisabled改变时，遍历所有表单项，动态设置它们的disabled属性。这需要访问到每个表单项的实例或对应的数据，可能需要使用refs来获取。 例如： 在模板中，每个el-form-item的控件设置ref： <el-form-item> <el-input ref="input1" :disabled="input1Disabled"></el-input> </el-form-item> 然后在watch中： watch: { formDisabled(newVal) { if (newVal) { this.$refs.input1.disabled = true; } else { this.$refs.input1.disabled = this.input1Disabled; } } } 但这种方法可能不够灵活，且需要为每个控件编写代码，对于动态生成的表单项可能不适用。 另一个可能的方案是，使用Vue的mixins或自定义指令来统一管理所有表单项的disabled状态。例如，创建一个指令，当表单的disabled状态变化时，自动更新所有子组件的disabled属性。 不过这可能比较复杂，对于用户来说，可能需要一个更简单的方法。 回到用户的问题，用户可能希望有一个直接的方法，在Vue2中动态设置el-form的disabled属性，同时允许某些表单项例外。根据elementUI的文档，el-form的disabled属性会影响所有子组件，但如果有表单项显式设置了disabled属性，那么它们的值可能会覆盖表单级别的设置。但根据引用[2]中的情况，似乎表单级别的优先级更高，导致子项的设置无效。 因此，正确的做法可能是不使用表单级别的disabled，而是手动为每个表单项设置disabled属性。例如，当需要整个表单禁用时，将所有表单项的disabled设置为true，而需要例外时，单独设置为false。这种方法虽然需要更多的代码，但提供了更精细的控制。 例如，在data中定义每个表单项的disabled状态： data() { return { form: { field1: '', field2: '' }, disabledStates: { field1: false, field2: false }, formDisabled: false }; }, 然后在模板中： <el-form> <el-form-item> <el-input v-model="form.field1" :disabled="formDisabled || disabledStates.field1"></el-input> </el-form-item> <el-form-item> <el-input v-model="form.field2" :disabled="formDisabled || disabledStates.field2"></el-input> </el-form-item> </el-form> 这样，当formDisabled为true时，所有字段都会被禁用，除非disabledStates中的某个字段显式设置为false。或者，可能需要调整逻辑，例如使用条件判断，当formDisabled为true时，某些字段可以覆盖。 不过这可能不符合用户的需求，用户可能希望整个表单有一个统一的disabled状态，同时允许某些字段例外。这时候，可能需要将整个表单的disabled状态和单个字段的状态结合起来，例如： :disabled="isFormDisabled ? true : individualDisabled" 其中，isFormDisabled是整个表单的禁用状态，individualDisabled是单个字段的设置。这样，当isFormDisabled为true时，所有字段都被禁用，否则根据individualDisabled决定。 但这种方法需要在每个字段的disabled属性中写这样的表达式，可能比较繁琐。另一种方法是使用计算属性来生成每个字段的disabled状态，基于表单的全局状态和自身的状态。 或者，用户可能需要的是动态切换整个表单的disabled属性，但允许某些字段保持可用。这时候，可能需要避免使用el-form的disabled属性，而是通过自定义的方式，例如在data中维护一个变量，当该变量变化时，所有表单项的disabled属性都随之变化。 例如，在data中定义isFormDisabled，然后在每个表单项的disabled属性中绑定isFormDisabled的值，除非有例外： <el-input :disabled="isFormDisabled || field.disabled"></el-input> 这样，当isFormDisabled为true时，所有字段都被禁用，除非某个字段的disabled属性显式设置为false。但需要确保field.disabled在需要例外时为false。 不过这可能需要在数据结构和逻辑上做更多的处理。或者，使用一个对象来存储每个字段是否禁用，当需要整体禁用时，遍历该对象，将所有字段的禁用状态设为true，除了例外。 总结，用户的问题可能可以通过以下步骤解决： 1. 不在el-form上设置disabled属性，而是通过控制每个表单项的disabled属性来实现动态禁用。 2. 使用一个全局变量（如formDisabled）来控制所有表单项的disabled状态，同时在需要例外的表单项中覆盖这个变量。 例如： <el-form> <el-form-item> <el-input :disabled="formDisabled"></el-input> </el-form-item> <el-form-item> <el-input :disabled="formDisabled && !exceptionField"></el-input> </el-form-item> </el-form> 当formDisabled为true时，第一个输入框被禁用，第二个输入框根据exceptionField的值决定是否禁用。如果exceptionField为true，则第二个输入框的disabled为false，即不被禁用。 这样，通过条件表达式，可以动态控制每个表单项的状态，而不依赖于表单级别的disabled属性。 另外，用户可能需要知道如何动态改变这个formDisabled变量。在Vue2中，可以通过方法或计算属性来实现。例如，在data中定义formDisabled，然后在某个事件中修改它的值： methods: { toggleFormDisabled() { this.formDisabled = !this.formDisabled; } } 这样，点击按钮或其他事件触发时，可以切换整个表单的禁用状态。 如果用户确实需要使用el-form的disabled属性，但需要某些表单项例外，可能需要寻找其他方法。例如，使用readonly属性代替disabled，或者使用CSS来隐藏或覆盖表单控件的交互。 但根据引用[3]，readonly和disabled都可以实现输入框的不可编辑，但行为不同。例如，disabled的表单项不会被提交，而readonly的会。因此，需要根据具体需求选择。 综上，用户的问题可以通过以下步骤解决： - 在el-form上不设置disabled属性，而是通过每个表单项的disabled属性来控制状态。 - 使用一个全局变量（如formDisabled）来统一控制这些表单项的disabled状态。 - 在需要例外的表单项中，使用条件表达式来覆盖全局变量。 因此，回答用户的具体方法可能包括： 1. 在Vue实例的data中定义控制disabled状态的变量。 2. 在el-form-item的控件上使用:disabled绑定该变量，或者更复杂的表达式。 3. 动态修改变量的值以切换禁用状态。 同时，需要注意elementUI中表单和表单项的disabled属性的优先级问题，避免出现引用[2]中的冲突情况。</think>在Vue2中动态设置`el-form`的`disabled`属性时，可以通过以下方法实现精细化控制： --- ### **方法一：通过表单级`disabled`属性统一控制** 在`el-form`组件上直接绑定`disabled`属性，这会**全局禁用所有表单项**，但需要注意其优先级高于单个表单项的设置[^2]。 ```html <el-form :disabled="isFormDisabled"> <el-form-item label="用户名"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="formData.email"></el-input> </el-form-item> </el-form> ``` ```javascript data() { return { isFormDisabled: false, // 控制表单全局禁用状态 formData: { username: '', email: '' } }; }, methods: { toggleFormDisabled() { this.isFormDisabled = !this.isFormDisabled; } } ``` --- ### **方法二：精细化控制单个表单项** 若需**部分字段禁用**，应在`el-form-item`的控件（如`el-input`）上单独设置`disabled`属性，避免表单级覆盖[^3]： ```html <el-form> <el-form-item label="用户名"> <el-input v-model="formData.username" :disabled="isUsernameDisabled"></el-input> </el-form-item> <el-form-item label="邮箱"> <el-input v-model="formData.email" :disabled="isEmailDisabled"></el-input> </el-form-item> </el-form> ``` ```javascript data() { return { isUsernameDisabled: false, // 单独控制用户名输入框 isEmailDisabled: false, // 单独控制邮箱输入框 formData: { username: '', email: '' } }; } ``` --- ### **方法三：动态切换禁用状态** 结合计算属性或条件逻辑，实现更复杂的动态控制： ```html <el-form> <el-form-item label="角色"> <el-input v-model="formData.role" :disabled="formData.role === 'admin'"></el-input> </el-form-item> </el-form> ``` ```javascript data() { return { formData: { role: 'user' } }; } ``` --- ### **注意事项** 1. **优先级冲突**：若同时设置表单级`disabled`和表单项级`disabled`，表单级会覆盖表单项级[^2]。 2. **替代方案**：若需保留表单提交值但禁止编辑，可使用`readonly`属性[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值