jquery 将disabled的元素置为enabled的三种方法


Posted in Javascript onJuly 25, 2009

这里发现可以采用三种的变通方法将置为disabled的元素状态改为enabled。
第一种:改变disabled的boolean状态,具体代码及解释如下:

$("button:eq(2)").click(function(){ 
var text2=$("input:text:eq(2)"); 
if(text2.attr("disabled")==false){ 
//通过设置disabled的boolean属性将第三个text输入框disabled属性置为true 
text2.attr("disabled",true); 
}else{ 
//通过将第三个text输入框disabled属性置为false来移除disabled属性 
text2.attr("disabled",false); 
} 
});

第二种:移除disabled属性,具体代码及解释如下:
$("button:eq(1)").click(function(){ 
var text2=$("input:text:eq(1)"); 
if(text2.attr("disabled")==false){ 
//通过设置disabled的值将第二个text输入框置为disabled 
text2.attr("disabled","disabled"); 
}else{ 
//通过移除的方式将第二个text输入框的disable属性删除 
text2.removeAttr("disabled"); 
} 
});

第三种:改变disabled的值,具体代码及解释如下:
$("button:eq(0)").click(function(){ 
var text1=$("input:text:eq(0)"); 
if(text1.attr("disabled")==""){ 
// 或者text1.attr("disabled")==false 
//通过设置disabled的值将第一个text输入框置为disabled 
text1.attr("disabled","disabled"); 
}else{ 
//通过覆盖的方式将第一个text输入框中的disabled属性清除掉 
text1.attr("disabled",""); 
} 
});

完整的示例代码如下(已测试通过):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> <script src="jquery的路径引入就行了"></script> 
<script type="text/javascript"><!-- 
$(document).ready(function () { 
$("button:eq(0)").click(function () { 
var text1 = $("input:text:eq(0)"); 
if (text1.attr("disabled") == "") { 
// 或者text1.attr("disabled")==false 
//通过设置disabled的值将第一个text输入框置为disabled 
text1.attr("disabled", "disabled"); 
} else { 
//通过覆盖的方式将第一个text输入框中的disabled属性清除掉 
text1.attr("disabled", ""); 
} 
}); 
$("button:eq(1)").click(function () { 
var text2 = $("input:text:eq(1)"); 
if (text2.attr("disabled") == false) { 
//通过设置disabled的值将第二个text输入框置为disabled 
text2.attr("disabled", "disabled"); 
} else { 
//通过移除的方式将第二个text输入框的disable属性删除 
text2.removeAttr("disabled"); 
} 
}); 
$("button:eq(2)").click(function () { 
var text2 = $("input:text:eq(2)"); 
if (text2.attr("disabled") == false) { 
//通过设置disabled的boolean属性将第三个text输入框disabled属性置为true 
text2.attr("disabled", true); 
} else { 
//通过将第三个text输入框disabled属性置为false来移除disabled属性 
text2.attr("disabled", false); 
} 
}); 
}); 
// --></script> 
</head> 
<body> 
<button>disabledNull</button> 
<input type="text" value="input something into me!" size="40"/> 
<br/> 
<button>disabledRemove</button> 
<input type="text" value="input something into me!" size="40"/> 
<br/> 
<button>disabledState</button> 
<input type="text" value="input something into me!" size="40"/> 
</body> 
</html>
Javascript 相关文章推荐
Javascript 继承机制实例
Aug 12 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
微信小程序 navbar实例详解
May 11 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
vue实现记事本功能
Jun 26 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 #Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 #Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 #Javascript
jquery 表单下所有元素的隐藏
Jul 25 #Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 #Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 #Javascript
Prototype Selector对象学习
Jul 23 #Javascript
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
简单实现js浮动框
2016/12/13 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
python远程登录代码
2008/04/29 Python
python with statement 进行文件操作指南
2014/08/22 Python
Python自动登录126邮箱的方法
2015/07/10 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Flask处理Web表单的实现方法
2021/01/31 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
广播体操口号
2014/06/18 职场文书
法定授权委托证明书
2015/06/18 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers