如何控制表单控件中的disabled

0.前言
    本文主要说明如何使能或禁止表单控件。表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料【1】。下面就通过一个简单的例子说明如何设置和读取disabled属性。

【示例页面——代码】
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="jquery.js"></script>  
  5. <meta charset="utf-8">  
  6. <title>测试disabled</title>  
  7. </head>  
  8. <body>  
  9. <div style="margin:0 auto; width:200px; text-align:center">  
  10. <p>  
  11. <input type="button" id="testButton" disabled="disabled" style="height:30px; font-size:20px" value="测试按钮">  
  12. </p>  
  13. </div>  
  14. </body>  
  15. </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.参考资料
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值