Question

我有这个简单的jQuery代码来测试。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
          $("text").attr("disabled","");
      });
    });
</script>
</head>
<body>
<input type="text">
<br />
<button>Set the textfield disabled</button>
</body>
</html>

HTML页面基本上带有一个简单的按钮和文本字段。我点击按钮时只想禁用输入字段。但它不起作用???

（PS：此代码来自w3schools.com网站，只是为了测试jQuery的强大功能）

Answer 1

从jQuery 1.7开始，您可以使用.prop：

$(document).ready(function(){
  $("button").click(function(){
      $(":text").prop("disabled", true);
  });
});

在1.7之前，你可以这样做：

$(document).ready(function(){
  $("button").click(function(){
      $(":text").attr("disabled", true);
  });
});

PS：使用$(":text")或$('input[type="text"]')选择文字类型的所有元素。

Answer 2

试试这个：

    <html>   
<head>   
<script type="text/javascript" src="jquery.js"></script>   
<script type="text/javascript">   
$(document).ready(function(){     
$("button").click(function(){         
$("#text").attr("disabled","true");     
});   
});   
</script>   
</head>   
<body>  
 <input id="text" type="text">
<br />
<button>Set the textfield disabled</button>
</body>
</html>

Answer 3

或（更现代）：

$("input[type=text]").prop('disabled', true);

Answer 4

text中没有jquery选择器。您需要使用属性选择器[attribute=value]

$('input[type=text]').prop('disabled', true); // prop Works on jquery 1.7+

或：

$('input[type=text]').attr('disabled', 'disabled'); // Works in each version. 
                                                    // But isn't W3C standard.

有一个:text选择器，但它的效率低于第一个选项，请参阅docs：

$（'：text'）相当于 $（'[type = text]'），因此会选择所有元素。与其他伪类选择器（以“：”开头的那些）一样，建议在它之前加上标签名称或其他选择器;否则，隐含通用选择器（“”）。换句话说，裸$（'：text'）相当于$（'：text'），因此应该使用$（'input：text'）。

附加说明：因为：text 是jQuery扩展而不属于   CSS规范，查询使用：text无法利用   本机DOM querySelectorAll（）提供的性能提升   方法。为了在现代浏览器中获得更好的性能，使用[type =“text”]   代替。

请注意，您的XHTML无效。你应该关闭<input type="text"> =＆gt; <input type="text" />

Answer 5

$（ “输入”）ATTR（ “无效”， “禁用”）;

Answer 6

“disabled”是属性，而不是属性本身。像“已检查”或“已禁用”这样的布尔值并不总是在以这种方式访问时正确更新（或检索）。使用

$(':text').prop('disabled',true);

代替。

如何使用这个简单的jQuery禁用HTML文本字段？

6 个答案: