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 $.ajax入门应用二
Nov 19 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
vue实现信息管理系统
2020/05/30 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python 如何测试文件是否存在
2020/07/31 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
shell程序中如何注释
2012/01/28 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
银行办公室岗位职责
2014/03/10 职场文书
一年级学生期末评语
2014/04/21 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
个人作风建设总结
2014/10/23 职场文书
龙门石窟导游词
2015/02/02 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技