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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 Javascript
详解微信小程序开发用户授权登陆
Apr 24 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
TensorFlow变量管理详解
2018/03/10 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
合作协议书
2014/04/23 职场文书
土木工程求职信
2014/05/29 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python
Nginx报404错误的详细解决方法
2022/07/23 Servers