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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 Javascript
javascript实现图片循环渐显播放的方法
Feb 24 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 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
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
Js组件的一些写法
2010/09/10 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
详解redux异步操作实践
2018/08/15 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python匿名函数用法实例分析
2019/08/03 Python
python实现的config文件读写功能示例
2019/09/24 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
小学生家长评语大全
2014/02/10 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
幼儿园辞职书
2015/02/26 职场文书
感恩教育观后感
2015/06/17 职场文书
2016国庆促销广告语
2016/01/28 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
初一语文教学反思
2016/03/03 职场文书
python解析json数据
2022/04/29 Python