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 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
Vue实现多标签选择器
Nov 28 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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/09/10 PHP
php生成html文件方法总结
2014/12/01 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
JavaScript中的执行环境和作用域链
2020/09/04 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
Python 文件操作实现代码
2009/10/07 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
送货司机岗位职责
2013/12/11 职场文书
毕业生自荐信
2013/12/14 职场文书
2014新年寄语
2014/01/20 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
公司保密承诺书
2014/03/27 职场文书
毕业生党员个人总结
2015/02/14 职场文书
酒店宣传语大全
2015/07/13 职场文书
公司开业致辞
2015/07/29 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书