标签：前端 input 表单 disabled
0.前言
本文主要说明如何使能或禁止表单控件。表单控件具有disabled属性，通过设置该属性可以禁止所有的input控件，input的更多属性请参考资料【1】。下面就通过一个简单的例子说明如何设置和读取disabled属性。
【示例页面——代码】
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<meta charset="utf-8">
<title>测试disabled</title>
</head>
<body>
<div style="margin:0 auto; width:200px; text-align:center">
<p>
<input type="button" id="testButton" disabled="disabled" style="height:30px; font-size:20px" value="测试按钮">
</p>
</div>
</body>
</html>
【示例页面】
图1 一个“孤独”的按钮
1.HTML写法
禁止某input控件。
<input disabled="disabled">
【注意】
【1】disabled包含字母d
【2】“disabled”而不是true或false。
2.javascript操作
【读取】
document.getElementById("testButton").disabled;
返回结果禁止时为true，使能时为false。
【设置】
document.getElementById("testButton").disabled = false;
设置禁止为true，使能为false。
3.jquery操作
【读取】
$("#testButton").prop("disabled");
返回结果禁止时为true，使能时为false。JQuery中prop函数设置表单空间属性。
【设置】
$("#testButton").prop("disabled", true);
设置禁止为true，使能为false。
4.jquery和javascript结合
【读取】
$("#testButton")[0].disabled;
【设置】
$("#testButton")[0].disabled=true;
【说明】
通过[]方法把jquery对象变为DOM对象，使用DOM对象的操作方法控制disabled属性。此处还可以使用get方法获得DOM对象。更多的内容可参考资料【2】
5.不太好用的attr
$("#testButton").attr("disabled");
【注意】获得结果为“disabled”或者undefined”，当按钮被禁止时返回“disabled”，当按钮被使能时返回undefined。所以推荐使用prop函数替代。
6.参考资料
前端笔记——如何控制表单控件中的disabled,布布扣,bubuko.com
前端笔记——如何控制表单控件中的disabled
标签：前端 input 表单 disabled
原文地址：http://blog.csdn.net/xukai871105/article/details/34946193
