×

js里如何启用和禁用input的应用

作者:天空2019.12.10来源:Web前端之家浏览:3305评论:0
关键词:jsinput

在jQuery中想要禁用或启用input元素可以使用prop()方法设置input元素的disabled属性来完成;该方法用于设置或返回所选元素的属性和值。

prop()方法设置或返回被选元素的属性和值。该方法如果用于返回属性值时,则返回第一个匹配元素的值;如果用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

语法:

返回属性的值:

$(selector).prop(property)

设置属性和值:

$(selector).prop(property,value

说明:disabled属性用于禁用 input 元素。

示例1:禁用input 元素

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
</head>

<body style = "text-align:center;">   
  
    <h1 style = "color:red;" >禁用input元素 </h1>  
    <input id = "input" type="text" name="input"/>  
    <button onclick="enable_disable()">禁用</button>  
      
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
    <script>  
        function enable_disable() { 
           $("input").prop('disabled', true);  
        } 
    </script>  
</body>   
</html>

示例2:启用input 元素

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
</head>

<body style = "text-align:center;">   
  
    <h1 style = "color:red;" >启用input元素 </h1>  
    <input id = "input" type="text" name="input" disabled/>  
    <button onclick="enable_disable()">启用</button>  
      
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
    <script>  
        function enable_disable() { 
           $("input").prop('disabled', false); 
        } 
    </script>  
</body>   
</html>

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js82394082309480.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    这个页面不是很友好啊...

  • vag13

    不错,正好遇到这个问题,感谢分享...

  • 访客

    第三方的闪光点复合弓...

  • Web前端之家

    后续会出vue3.0教程呢,等待~~...

  • qiqndu

    VUE3.0没教程吗,可以出些啊...

  • Web前端之家

    已加上。...

  • 访客

    交换友情链接,网址http://www.wzjskf.com/关键词:seo网站优化e.g:...

  • 访客

    首先是大学生的...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2020 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.5 Valyria