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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
jQuery 使用手册(二)
Sep 23 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
js数据类型检测总结
Aug 05 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
vuex 的简单使用
2018/03/22 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
详解Python验证码识别
2016/01/25 Python
python win32 简单操作方法
2017/05/25 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python的sys.path模块路径添加方式
2020/03/09 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
建筑人员岗位职责
2013/12/25 职场文书
租房协议书怎么写
2014/04/10 职场文书
北京奥运会主题口号
2014/06/13 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
四风查摆剖析材料
2014/10/10 职场文书
培根随笔读书笔记
2015/07/01 职场文书