首页 > 代码库 > 前端笔记——如何控制表单控件中的disabled
前端笔记——如何控制表单控件中的disabled
0.前言
本文主要说明如何使能或禁止表单控件。表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料【1】。下面就通过一个简单的例子说明如何设置和读取disabled属性。
【示例页面——代码】
<!DOCTYPE html> <html> <head> <script src=http://www.mamicode.com/"jquery.js"></script>>
【示例页面】
图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.参考资料
【1】表单控件属性说明
【2】前端学习——选择结果为JQuery对象还是DOM对象?
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。