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 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
js 内存释放问题
Apr 25 Javascript
js浮动图片的动态效果
Jul 10 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
JavaScript多线程详解
Aug 12 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 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中$_SERVER的详细参数与说明
2008/07/29 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python语言中with as的用法使用详解
2018/02/23 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python flask搭建web应用教程
2019/11/19 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
Structs界面控制层技术
2013/10/11 面试题
展会邀请函范文
2014/01/26 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书