jquery 将disabled的元素置为enabled的三种方法


Posted in Javascript onJuly 25, 2009

这里发现可以采用三种的变通方法将置为disabled的元素状态改为enabled。
第一种:改变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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 #Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 #Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 #Javascript
jquery 表单下所有元素的隐藏
Jul 25 #Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 #Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 #Javascript
Prototype Selector对象学习
Jul 23 #Javascript
You might like
php实现天干地支计算器示例
2014/03/14 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python贪心算法实例小结
2018/04/22 Python
Python if语句知识点用法总结
2018/06/10 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python操作excel让工作自动化
2019/08/09 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python Paramiko使用示例
2020/09/21 Python
寄语十八大感言
2014/02/07 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
开会通知短信大全
2015/04/20 职场文书
三好学生竞选稿
2015/11/21 职场文书