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用户注册提示效果的简单实例
Aug 17 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 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
一个odbc连mssql分页的类
2006/10/09 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
新手入门常用代码集锦
2007/01/11 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
python抓取京东小米8手机配置信息
2018/11/13 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
毕业生自我鉴定实例
2014/01/21 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
企业法人代表任命书
2014/06/06 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
导游词之日月潭
2019/11/05 职场文书