jquery改变disabled的boolean状态的三种方法


Posted in Javascript onDecember 13, 2013

第一种:改变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定时器的使用(实例讲解)
Jan 06 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
JS作用域链详解
Jun 26 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 #Javascript
Extjs4中的分页应用结合前后台
Dec 13 #Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 #Javascript
window.print打印指定div实例代码
Dec 13 #Javascript
Javascript中call的两种用法实例
Dec 13 #Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 #Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 #Javascript
You might like
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
js自定义回调函数
2015/12/13 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
Python基于template实现字符串替换
2020/11/27 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
团日活动总结
2014/04/28 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
优秀会计求职信
2014/07/04 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
八项规定整改方案
2014/10/01 职场文书
承诺保证书格式
2015/02/28 职场文书
中标通知书范本
2015/04/17 职场文书
python基础之爬虫入门
2021/05/10 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android