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 添加和移除函数的通用方法
Oct 20 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 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
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
XENON基于JSON变种
2010/07/27 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
使用Python生成XML的方法实例
2017/03/21 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
Python logging设置和logger解析
2019/08/28 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Python 实现try重新执行
2019/12/21 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
英文演讲稿开场白
2014/08/25 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python