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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
js实现弹框效果
Mar 24 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
超简单使用Python换脸实例
2019/03/27 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
应届大学生求职信
2013/12/01 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
安全教育主题班会总结
2015/08/14 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android