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 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
Script的加载方法小结
Jan 12 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
javascript生成随机数的方法
May 16 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
es6 filter() 数组过滤方法总结
Apr 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
制作特殊字的脚本
2006/06/26 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
浅谈js原生拖放
2016/11/21 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python实现自动登录
2018/09/17 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
法制宣传月活动方案
2014/05/11 职场文书
纪检监察建议书
2014/05/19 职场文书
教师节联欢会主持词
2015/07/04 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android