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实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
浅谈Vue数据响应
Nov 05 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
ie支持function.bind()方法实现代码
2012/12/27 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
python中List的sort方法指南
2014/09/01 Python
Python的pycurl包用法简介
2015/11/13 Python
python tkinter控件布局项目实例
2019/11/04 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
测控技术自荐信
2014/06/05 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书