移除input、Select的禁用

最新推荐文章于 2021-08-05 19:11:26 发布
最新推荐文章于 2021-08-05 19:11:26 发布
阅读量985 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44588757/article/details/98842957
本文介绍了一种通过点击事件解除HTML中Input和Select元素禁用状态的方法，使用removeAttr(disabled)实现，适用于需要控制用户输入场景。

移除input、Select的禁用
输入框、下拉框这些在我们平时生活中用的也非常多，一些填写数据选择数据这些都是非常常见的，这次我做的项目就遇到了需要点击后再移除框的禁用，从而达到避免不小填错。一般情况下这些东西都是正常使用但在有些时候我们不想要用户去修改或者填写的一些数据我们该怎样去进行一个操控，这个其实也非常的简单我们只要进行相关的一个属性控制就行了。
首先看一下效果图
禁用状态
在这里插入图片描述
解除禁用状态
在这里插入图片描述
所以今天要实现的效果就是通过点击事件进行一个解除input、Select的禁用模式
代码图：
在这里插入图片描述
removeAttr(disabled) 方法就是从被选元素中移除属性
在这里我们主要实现这些功能的解除禁用主要就是一个对象RemoveAttr，RemoveAttr它就是对HTML属性的一个操作，它可以改变属性的值，设置属性的值，从而达到你需要在什么时候有一个什么效果。
也得在input、Select里面添加一个Remoudisabled来调用
在这里插入图片描述
在这里插入图片描述

阿华°
关注
html5:input禁用
milijiangjun的博客
08-13 2492
禁用的界面的3中方式： 1.disabled 属性 文字会变成灰色，不可编辑。 2.readonly 属性文字不会变色，也是不可编辑的 3.onfocus=this.blur() 当鼠标放不上就离开焦点 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
HTML中使用javascript解除禁止input输入框代码：
weixin_34310785的博客
10-07 726
转：表单中Readonly和Disabled的区别 参考资料： disabled和readonly区别： 参考博文1地址：http://blog.youkuaiyun.com/symgdwyh/article/details/5342937 两种属性的写法如下：   1、&lt;input type="text" name="name" value="xxx" disabled="true...
设置 取消input的disabled属性 getattribute(),setAttribute(),removeattribute()用法
aqxiebin的专栏
08-24 6990
<br /><script language="javascript" type="text/javascript"> <br /> function enabledisable() <br /> { <br /><br /> if(input.getAttribute('disabled')) <br /> { <br /> input.removeAttribute('disabled'); <br /> document.getElementById('enadisinp').
禁用启用input、select、按钮影藏和显示
weixin_44543121的博客
07-08 1734
禁用启用input、select、按钮影藏和显示
input s:select禁用
panzheng0920的专栏
02-15 366
禁用+只读 &lt;input readonly="readonly"  disabled="disabled"/&gt;   禁用 （没有只读属性） &lt;s:select disabled="true"/&gt;
使用css禁用input、checkbox、select等html控件实现disable效果
09-24
在网页设计和开发过程中，经常会遇到需要禁用某些表单控件（如input、checkbox、select等）的需求。通过使用CSS（层叠样式表），我们可以轻松地给这些控件添加禁用效果，而无需借助JavaScript代码。这种禁用状态通常...
BootStrap模态框和select2合用时input无法获取焦点的解决方法
08-29
然而，实践证明，这种方法可能并不奏效，因为即使禁用了`enforceFocus`，Select2的input仍然无法获取焦点。因此，通常推荐使用第一种方法。 总结来说，当Bootstrap模态框和Select2插件同时使用时，若遇到input无法...
text，input，select等标签取消选中时加粗边框
04-29
好的，我现在需要解决用户的问题：如何为text、input、select标签在未选中状态时设置加粗边框的CSS样式。首先，我得回忆一下相关的CSS知识。用户提到的是在取消选中时添加样式，也就是当这些元素没有被选中时的状态...
layui的文本框和select选择框如何禁用
最新发布
07-26
要禁用Layui的文本框（input）和选择框（select），我们可以使用Layui提供的方法，也可以使用原生的JavaScript方法，但为了保持Layui的样式和功能一致性，建议使用Layui提供的方法。 对于文本框，我们可以通过设置`...
html5的input的required使用中遇到的问题及解决方法
09-27
在提交后重新启用这些元素，例如使用jQuery：`$(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true)`和`attr("disabled", false)`。 **产生原因** Chrome浏览器在表单提交时，会尝试聚焦...
前端页面，input框禁用编辑的三种方法
旗袍不开、怎么得胜？
05-27 2330
1.disabled 被禁用的 input 元素，*不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。*设置后文字的颜色会变成灰色。 <input type="text" disabled="disabled" /> *disabled 属性无法与 一起使用。 2、readonly unselectable=‘on’。 该属性跟disable类似，input 元素，*不可编辑，不可复制，不可选择，不能接收焦点，*设置后文字的颜色也会变成灰色，但是后台可以接收到传值。 <
如何利用jquery来给input或者select控件添加或删除disabled属性全部方法总结
diguanming8054的博客
05-24 874
前段时间，做了一个前端页面用到了jquery来来添加或者删除input和select控件的disabled属性，具体总结如下： 1.以下二种方法是可以为input添加disabled属性的方法：//两种方法设置disabled属性 $('#selectId').attr("disabled",true); $('#selectId').attr("disabled","disabled...
点击一个input输入框另一个input选中，点击不选择时另一个清空,输入框做年龄限制
qq_39181017的博客
01-04 1253
  &lt;input class="agetype" name="agetype" style="margin-left: 10px;margin-bottom:5px" type="checkbox" value="0" &gt;年龄&gt;&lt;/input&gt; &lt;input id="agenum" name
jquery disable按钮（启用、禁用按钮）
热门推荐
wangjun5159的专栏
08-14 8万+
启用按钮： $("#id").attr("disabled","disabled"); 禁用按钮： $("#id").$("#id").removeAttr("disabled");
禁止双击页面选中文字
qq_43600406的博客
08-05 501
写代码的时候遇上双击页面会选中文字的情况，个人感觉挺难受的，就禁止了，在这里记录下方法 -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;```
jquery input标签的禁用和启用disabled
北斗星的爱886的博客
06-18 1万+
定义和用法 disabled 属性规定应该禁用 input 元素。 被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。 注释：disabled 属性无法与 一起使用。 实例 通过为radio按钮添加点击事件，进行启用或禁用input。 HTML： <h3>疫情防控个人信息</h3> 有武
js 禁用和解除禁用按钮_JavaScript如何来禁用按钮？
weixin_30990711的博客
01-27 2万+
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能。那么如何使用javascript来禁用按钮、让按钮不可点击？下面本篇文章就来给大家介绍一下。在JavaScript中，可以为button按钮添加上disabled属性来禁用按钮。disabled属性规定应该禁用input/button元素，只要在标签中添加属性disabled="true...
解决取消input标签中disabled属性
amy540821的博客
02-05 5065
<input type="button" value="提交" class="submit" style="color: black; background-color: rgb(223, 223, 223);" disabled="disabled"> 　　做了一个button，需要设置它的disable属性，规定什么时候可以点，什么时候不可以点。 ...
html select 禁止修改,input和select设置为不可修改及取消不可修改
weixin_39854867的博客
06-03 5647
input和select设置为不可修改及取消不可修改。1、当需设置input和select显示为只读(不可修改)时，两者有不同的设置方法。1)input可设置为只读，在其中增加属性readonly=“readonly”;2)select没有readonly这个属性，不过可以通过disabled=“disabled”进行设置;3)其中input设置为只读时，仍可提交，而select设置为不可用时，则...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值