如何控制表单控件中的disabled

最新推荐文章于 2024-04-24 12:00:00 发布
最新推荐文章于 2024-04-24 12:00:00 发布
阅读量860 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wustzbq0713/article/details/43164185
版权
0.前言
    本文主要说明如何使能或禁止表单控件。表单控件具有disabled属性，通过设置该属性可以禁止所有的input控件，input的更多属性请参考资料【1】。下面就通过一个简单的例子说明如何设置和读取disabled属性。

【示例页面——代码】
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="jquery.js"></script>  
  5. <meta charset="utf-8">  
  6. <title>测试disabled</title>  
  7. </head>  
  8. <body>  
  9. <div style="margin:0 auto; width:200px; text-align:center">  
  10. <p>  
  11. <input type="button" id="testButton" disabled="disabled" style="height:30px; font-size:20px" value="测试按钮">  
  12. </p>  
  13. </div>  
  14. </body>  
  15. </html>  
【示例页面】

图1 一个“孤独”的按钮

1.HTML写法
    禁止某input控件。
    <input disabled="disabled">
    【注意】
    【1】disabled包含字母d
    【2】“disabled”而不是true或false。
 
2.javascript操作
    【读取】
    document.getElementById("testButton").disabled;
    返回结果禁止时为true，使能时为false。
    【设置】
    document.getElementById("testButton").disabled = false;
    设置禁止为true，使能为false。

3.jquery操作
    【读取】
    $("#testButton").prop("disabled");
    返回结果禁止时为true，使能时为false。JQuery中prop函数设置表单空间属性。
    【设置】
    $("#testButton").prop("disabled", true);
    设置禁止为true，使能为false。

4.jquery和javascript结合
    【读取】
    $("#testButton")[0].disabled;
    【设置】
    $("#testButton")[0].disabled=true;
    【说明】
    通过[]方法把jquery对象变为DOM对象，使用DOM对象的操作方法控制disabled属性。此处还可以使用get方法获得DOM对象。更多的内容可参考资料【2】

5.不太好用的attr
    $("#testButton").attr("disabled");
    【注意】获得结果为“disabled”或者undefined”，当按钮被禁止时返回“disabled”，当按钮被使能时返回undefined。所以推荐使用prop函数替代。

6.参考资料
想旅游咯
关注
专栏目录
HTML中禁用表单控件的两种方法readonly与disabled
09-28
在HTML中，我们有时需要使表单控件呈现不可修改状态，以满足特定场景的需求，例如在修改密码的页面上，通常需要展示一个只读的用户名字段。为此，HTML提供了两种方式来实现这一功能，即`readonly`和`disabled`属性。...
disabled的使用
hcyhcyhcy_的博客
03-31 6487
disabled是布尔属性 对于布尔 attribute (它们只要存在就意味着值为 true) 这个属性在html中，只要出现disabled，那么就会禁用 在js中可以控制 HTML中都禁用 <p>Last name: <input type="text" name="lname" disabled="disabled" /></p> <p>Last name: <input type="text" name="lname" di
前端笔记——如何控制表单控件中的disabled
物联网 IoT 经验分享
06-26 6070
0.前言     本文主要说明如何使能或禁止表单控件。表单控件具有disabled属性，通过设置该属性可以禁止所有的input控件，input的更多属性请参考资料【1】。下面就通过一个简单的例子说明如何设置和读取disabled属性。 【示例页面——代码】 测试disabled 【示例页面】 图1 一个“孤独”的按钮
前端disable和readonly的区别？
weixin_45062076的博客
02-27 458
disable 可作用于：input textarea select option button元素上 readonly 作用于：input textarea disable改变元素外观 readonly不改变 disable 不能进行获取焦点、tab导航、元素操作 readonly 可以进行获取焦点、tab导航、元素操作 表单提交 disable没有发送数据 readonly会发送数据 ...
前端控件设置disabled="disabled"属性时，后台不能获取修改后的值（开发时遇到的问题）
已被格式化的叔叔
11-01 4756
input标签加disabled属性后无法获得其value值 有些表单元素不希望用户填写的话，可设置disabled属性，但是设置disabled属性的表单字段值不会提交到后台。 可以通过设置readonly属性值达到同样的效果且能提交到后台。 注意： input设置为disabled值时会有下面的限制： 1、不能接收焦点； 2、使用tab键时将被跳过； 3、可能不是...
elementUi中的表单全部禁用allDisabled
qq_45018844的博客
01-06 4557
disabled 首先这个大家一定都知道，可以控制禁用按钮的 如图所示，我之前遇到了这样的情况，点击提交成功之后，所有的input框全部禁用，我找了很多很多的百度，结果大佬告诉我，说这是element自带的一个allDisabled，不怪我没做出来。 this.$refs.giveForm.allDisabled = false 可以这样设置表单的allDisabled为false就不会禁用了，界面会不太好看，大家后续可以自己对页面颜色进行调整的。 ...
浅析Angular19 自定义表单控件
08-28
Angular19 中的自定义表单控件是指开发者可以根据需要创建自己的表单控件，以满足特定的业务需求。在 Angular 中，官方提供了 ControlValueAccessor 接口来辅助开发者构建自定义的表单控件。 ControlValueAccessor ...
html表单控件禁用属性readonly VS disabled介绍
01-21
在html中有两种禁用表单提交的方法，他们分别是：  1.给控件标签加\u4e0areadonly='readonly'属性  2.给控件标签加\u4e0adisabled='disabled'属性  例如:  <input type=text value= readonly=readonly />...
HTML5-input表单控件调用代码_html5_表单_input_代码_控件_
09-29
总结，HTML5的`input`表单控件极大地丰富了网页表单的设计和功能，使得开发者可以更方便地创建符合用户需求的交互界面。通过学习和掌握这些新特性，我们可以提升网站的用户体验，同时减少后端验证的压力。
HTML <input> 标签的 disabled 属性
weixin_30951389的博客
02-20 362
定义和用法 disabled 属性规定应该禁用 input 元素。 被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。 注释：disabled 属性无法与 <input type="...
前端 表单中的readOnly 和 disabled有什么区别？
最新发布
qq_44327851的博客
04-24 657
readOnly和disabled是两种在表单元素中设置的属性，用于控制用户对表单元素的操作权限。
Vue ref 的用法详解
陆小森_红齐飘飘的博客
09-25 3617
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。 用法如下 <!-- `vm.$refs.p` will be the DOM node --> <p ref="p">hello</p> <!-- `vm.$re...
最近遇到的若干Web前端问题：disable和readonly，JqueryEasyUI，KindEditor
weixin_30701521的博客
11-04 200
最近项目中用到了Jquery Easyui和KindEditor等框架组件，问题真不少啊~ 一些看起来很简单理所当然的事情，竟然花费了不少时间，才解决好~1.readonly和disable的区别 readonly:只读，不可编辑，提交表单时，值会提交到后端。 disable:禁止（包含了“只读”和“不可编辑”），提交表单时，值不会提交到后端。 如果需要提交到后端，在表...
攻防世界(WEB) disabled_button
qq_54929891的博客
08-23 1094
根据题目描述，可以把思维放在html上，重点是看网页代码 进去后发现flag不能触发，说明肯定有一个属性禁止了这个button按钮，打开F12查看 在input标签中看见一个disabled属性，可以猜想是disabled这个属性禁止了button的点击，根据英文意思来猜也是失去能力的；可以查阅一下关于input标签中disabled属性的功能 定义和用法 disabled 属性规定应该禁用 input 元素。 被禁用的 input 元素既不可用，也不可点击。可以设置 disabled...
disable到底是指什么
weixin_49393290的博客
10-08 1634
您看这个@click新增的方法，注意看新增没有传参，但是查看和修改穿了 <el-button v-if="isAuth('pesticide:crop:save')" type="primary" @click="addOrUpdateHandle()" >新增</el-button> <template slot-scope="scope">
Vue动态控制disabled属性
热门推荐
前端如逆水行舟...
08-16 2万+
在Vue中disabled:的值是受布尔值影响的，false为关闭禁用，true为开启禁用效果。通过某个input中值是否为空或者某个id是否为空来控制当前的表单元素是否禁用
vue重点1：disabled=“false“ 在字符串模板中无效的原因
小黄呀呀呀的博客
09-14 6491
问题: 在字符串模板里对按钮设置属性的时候，想要先测试一下的，实现 的效果，但是发现失效 产生原因: 我上面的东西是写在字符串模板里的，所以布尔值在字符串模板里是字符串型的，所以我们需要将其绑定成一个变量 设置禁用的一个小技巧 ...
ElementUI 禁用 disabled 整个表单，但是有一个 item 是不禁用的
li_dian_jin的博客
12-16 6054
给 `el-form` 设置了 `disabled`，要给其中的一个 `el-form-item` 取消禁用，嵌入一个子 `form` 就行了。
Angular19自定义表单控件实战指南
当Angular应用中的标准表单控件无法满足特定业务需求时，开发者就需要创建自定义的表单控件。这些控件不仅需要展示数据，还需要处理用户输入并保持模型和视图的一致性。这就涉及到模型（Model）和视图（View）之间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值