html的disabled使用

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

#javascript #ViewUI

本文介绍了如何在HTML中使用JavaScript操控input元素的disabled属性，包括禁用和启用input元素的方法，并提供了具体的代码实例。
disabled 属性规定应该禁用 input 元素。

被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。

注释：disabled 属性无法与 <input type="hidden"> 一起使用。


<html>
<body>
<script type="text/javascript">
   function butt(able){
      if('undisabled'==able){
         document.getElementById("bbb").disabled="";
      }else{
         document.getElementById("bbb").disabled="true";
       }    
   }

</script>
<form action="/example/html/form_action.asp" method="get">
    <p>First name: <input id="aaa" type="text" name="fname" /></p>
    <p>Last name: <input id="bbb" type="text" name="lname" value="哈哈" disabled="disabled" /></p>
  <input onclick= "butt('disabled')" type="button" value="disabled" />
  <input onclick= "butt('undisabled')" type="button" value="undisabled" />
  <input type="submit" value="Submit" />
</form>

<p>请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>

</body>
</html>



给元素增加和删除disabled属性

<div id="esealSubRight_cbx">
    <p>
        <label >签章管理：</label>
            <input id="subRightWhiteList1" name="subRightWhiteList" type="checkbox" value="14-01-01-00-00-00-00-00-00-00-00" checked="checked">公章管理</input>&nbsp
            <input id="subRightWhiteList2" name="subRightWhiteList" type="checkbox" value="14-01-02-00-00-00-00-00-00-00-00" checked="checked">私章管理</input><br>
            <input id="subRightWhiteList3" name="subRightWhiteList" type="checkbox" value="14-01-03-00-00-00-00-00-00-00-00" checked="checked">签章申请</input>&nbsp
            <input id="subRightWhiteList4" name="subRightWhiteList" type="checkbox" value="14-01-04-00-00-00-00-00-00-00-00" checked="checked">签章制作</input>
     </p>
</div>
<script type="text/javascript">
	function testmethod(){
		alert('testmethod');
		$("#subRightWhiteList1").attr("disabled","disabled");
		$("#subRightWhiteList2").attr("disabled","disabled");
		$("#subRightWhiteList3").attr("disabled","disabled");
		$("#subRightWhiteList4").attr("disabled","disabled");
	}
		function testmethod2(){
			alert('testmethod2');
			$("#subRightWhiteList1").removeAttr("disabled");
			$("#subRightWhiteList2").removeAttr("disabled");
	}
</script>

[color=red]如果将外层的div加上disabled属性，里面的input框是不能修改了，但后台还能接收到值，只能将disabled属性直接加到input框上[/color]
html标签的属性——disabled与readonly区别
Gorden的博客
11-27 1866
disabled与readonly区别
html表单属性readonly和disabled的使用方法
09-28
- 使用方法：同样是在HTML元素上添加`disabled`属性，例如`<input type="text" disabled>`。 两者之间的关键区别在于，`readonly`字段在提交表单时仍会传递其值，而`disabled`字段则不会。此外，`readonly`字段...
html的disabled属性
weixin_38674371的博客
11-14 7959
由于我操作在同一个dialog弹出层里，每次弹出页面都会通过ajax获取数据，然后根据数据特性来判断input的禁用或使用，由于使同一个页面，html属性会残留在页面上。之后网上的一些回答迷惑了我，让我以为disabled="true" 或disabled="disabled"表示禁用，disabled="false" 表示可使用。其实浏览器只要发现元素中有diasbled属性，不管属性值是什么，都
HTML disabled属性的启用和禁止
热门推荐
John的专栏
01-18 3万+
HTML中的input元素、button元素、option元素等都具有一个disabled属性。  当赋予该属性时该元素将变得不可交互，如下代码所示：  Html代码   input type="button" disabled="disabled" value="测试按钮">   其中属性值“disabled”可以替换成任何的其它单词甚至是“enabled”（
html disabled用法
cuanyangpa3685的博客
03-17 540
表示已经失效的输入域(框),使用这个选项可以生成禁止修改的输入框. 计算机旅游购物禁止修改输入框，还可以使用readonly,如：[@more@] ...
HTML disabled
歪脖先生的博客
04-16 1181
disableddisabled属性用来禁用某个控件。在某些情况下，你可能不想让用户使用表单中的某些部分，就可以使用这个特性。当某个控件被禁用时，它不能获得焦点，如果使用键盘选择控件时，它也会被跳过。当按钮被禁用时，该按钮不能被点击。如：&lt;input type="submit" value=" 提 交 " disabled /&gt;运行结果如图 3‑36 所示：图3-36 禁用提交按钮当...
html form表单input使用disabled后提交不能获取表单值的解决方法
12-13
使用readonly带替代disabled，即把 disabled="disabled" 修改为 readonly="readonly" 二者区别： disabled不能接收焦点，使用tab键时将被跳过，可能不是successful的； readonly可以接收焦点但不能被修改，可以使用...
HTML中Select不用Disabled实现ReadOnly的效果
09-06
通常，我们会使用`disabled`属性来禁用一个`<select>`元素，但这会使得整个下拉列表呈灰色不可选状态。而题目中提到的需求是“HTML中Select不用`Disabled`实现`ReadOnly`的效果”，即保持下拉列表可查看，但阻止用户...
超链接的禁用属性Disabled使用示例
09-04
本文将深入探讨如何使用`disabled`属性来控制超链接的可用性，并解决一些相关的技术问题。 首先，让我们来看看`disabled`属性的基本用法。在HTML中，我们可以直接在`<a>`标签中设置`disabled`属性，如下所示： ```...
html语言disabled,htmldisabled属性
weixin_28684497的博客
05-31 2461
html 有disabled 属性的有哪些disabled对于所有的表单元素都有效，包括input,select,radio, checkbox, button等。如何禁用标签的disabled属性a标签的disable＝“true”属性只能使按钮灰掉，但还是可以点击跳转，要想无法点击，可以通过js删除href属性： function delLink(link) { //link.disabled...
HTML的不可用disabled
Larry的博客
11-11 676
三元表达式 disabled 属性规定应该禁用 input 元素。 被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止 submitDisable(){ // 暂存 if(this.batch){ // 批量上传TODO let err = 0 if(this.uploadData.file_type
html的属性disabled
我的博客名称
07-21 245
     今天做东西的时候发现input 的属性disabled不管值为true,false,还是''（空字符串），始终会把控件变为不可用的状态。有的时候我设置 一些控件为不可用了之后，可能以后某些时候我又要启用这个控件，那怎么办？因为你设置了这个属性，不管这时你再怎么设置这个属性的值，那都是没有用的，那怎么办？我想 只有删除这个属性了（指disabled属性）。 用jquery 实...
html style div disabled,div+css - 其他HTML问题 - disabled属性
weixin_39749243的博客
06-20 308
div+css - 其他HTML问题 - disabled属性DISABLED Attribute | disabled Property Sets or retrieves a value that indicates whether the user can interact with theobject.设置或获取用户能否与对象交互的属性值。[disabled Property (BUTTO...
div+css - 其他HTML问题 - disabled属性
gdfjhc的博客
02-08 574
div+css - 其他HTML问题 - disabled属性
html 中使用disable和innerHtml属性
qq_26713523的博客
10-16 268
$("#id").find("label[name=value]")[0].disable=false; $("#id").find("label[name=value]")[0].innerHtml="编辑"
html disabled属性的启用和禁止,超链接的禁用属性Disabled使用示例
weixin_29176179的博客
06-04 2341
可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击例如：bai du上面的意思是不想让bai du的超链生效，但在click不做任何约束和判断的话，但点击bai du的时候自然就会跳转到百度页面，这就是html中超链接禁用属性的bug可以添加下面js约束来判断超链接是否可以使用function click(obj){if(obj.disabled){return...
html中的disabled属性的使用方式
wuqf_java的博客
11-30 1万+
disabled="disabled" .表示属性是不能写东西的，disabled=“false”,表示不启用该属性属性，disable=”true”,表示启用该属性属性
(转)html 中的disabled和Readonly
weixin_34032827的博客
03-31 222
一，先看看这两个属性在效果和使用上的区别 READONLY and DISABLED both remove the functionality of the input field, but to different degrees. READONLY locks the field: the user cannot change the value. DISABLED...
HTML隐藏，禁用，只读
qishi45的博客
05-17 655
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏，禁用，只读</title> </head> <body> <form action="1.我的第一个网页.html" method="get"> <!-- 文本输入框：input type=“text” 默认值初始值为 咕咕
disabled属性使用
最新发布
12-25
`disabled` 属性用于禁用 HTML 元素，使其不可用且不能被用户操作。以下是不同场景下 `disabled` 属性的使用方法： ### HTML 中静态设置 在 HTML 标签中直接添加 `disabled` 属性，可以使元素在页面加载时就处于禁用状态。例如，禁用一个按钮和一个输入框： ```html <button disabled>禁用的按钮</button> <input type="text" disabled placeholder="禁用的输入框"> ``` ### JavaScript 中动态设置 可以使用 JavaScript 动态地添加或删除 `disabled` 属性。要添加 `disabled` 属性，可将其设置为相应的值；要删除 `disabled` 属性，可调用元素的 `removeAttribute()` 方法，将 `disabled` 作为参数传递。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="myButton">可点击的按钮</button> <button id="enableButton">启用按钮</button> <script> // 获取按钮元素 const myButton = document.getElementById('myButton'); const enableButton = document.getElementById('enableButton'); // 禁用按钮 myButton.disabled = true; // 为启用按钮添加点击事件监听器 enableButton.addEventListener('click', function () { // 启用按钮 myButton.removeAttribute('disabled'); }); </script> </body> </html> ``` ### jQuery 中动态设置 在 jQuery 中，可使用 `attr()` 方法来设置或移除 `disabled` 属性。以下示例展示了如何禁用和启用一个输入框： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery disabled example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="text" id="myInput" placeholder="输入框"> <button id="disableButton">禁用输入框</button> <button id="enableButton">启用输入框</button> <script> $(document).ready(function () { // 禁用输入框 $('#disableButton').click(function () { $('#myInput').attr('disabled', 'disabled'); }); // 启用输入框 $('#enableButton').click(function () { $('#myInput').removeAttr('disabled'); }); }); </script> </body> </html> ``` ### Vue.js 中动态绑定 在 Vue.js 里，可使用 `v-bind` 指令（简写为 `:`）来动态绑定 `disabled` 属性。以下示例展示了如何根据数据状态来禁用或启用一个按钮： ```vue <template> <div> <button :disabled="isButtonDisabled"> {{ isButtonDisabled ? '按钮已禁用' : '按钮可点击' }} </button> <button @click="toggleButtonState">切换按钮状态</button> </div> </template> <script> export default { data() { return { isButtonDisabled: true }; }, methods: { toggleButtonState() { this.isButtonDisabled = !this.isButtonDisabled; } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值