前端笔记——如何控制表单控件中的disabled

Posted BluesQian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端笔记——如何控制表单控件中的disabled相关的知识,希望对你有一定的参考价值。

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

[html]
<!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。
    【设置】
 
    设置禁止为true,使能为false。

3.jquery操作
    【读取】
      $("#testButton").prop("disabled");
    返回结果禁止时为true,使能时为false。JQuery中prop函数设置表单空间属性。
    【设置】
     $("#testButton").prop("disabled", true);
    设置禁止为true,使能为false。
 

以上是关于前端笔记——如何控制表单控件中的disabled的主要内容,如果未能解决你的问题,请参考以下文章

如何修复角度表单控件中的“找不到名称为 __v 的表单控件”错误?

动态禁用控件时显示警告消息 angular2

PREACT学习笔记

关于bootstrap--表单控件(disabled表单禁用显示表单验证的样式)

表单中Readonly和Disabled的区别

转载表单中 Readonly 和 Disabled 的区别