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访问SWF的函数用法实例
Jul 01 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
switchery按钮的使用方法
Dec 18 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
Javascript异步编程async实现过程详解
Apr 02 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
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
javascript动画浅析
2012/08/30 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
Python常见数据结构详解
2014/07/24 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python版DDOS攻击脚本
2019/06/12 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
Python字符串的修改方法实例
2019/12/19 Python
基于matplotlib xticks用法详解
2020/04/16 Python
详解python metaclass(元类)
2020/08/13 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
体育教师工作总结的自我评价
2013/10/10 职场文书
挂职自我鉴定
2014/02/26 职场文书
门前三包责任书
2014/04/15 职场文书
就职演讲稿范文
2014/05/19 职场文书
会计工作总结范文2014
2014/12/23 职场文书
上诉答辩状范文
2015/05/22 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
python中 .npy文件的读写操作实例
2022/04/14 Python