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

作者：天空2019.12.10来源：Web前端之家浏览：11969评论:0

关键词：js input

在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>

赏您的支持是我们创作的动力！