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

发布于 2024-12-29 04:37:08 字数 599 浏览 4 评论 0原文

我有这个简单的 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有多强大）

原文

I have this simple jQuery code to test out.

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

Basically the HTML page comes with a simple button and textfield. All I want to have the input field disabled as I click the button. But it doesn't work???

(PS: this code is sourced out from w3schools.com website, just to simply test out how powerful jQuery is)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残月升风 2025-01-05 04:37:08

从 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"]') 选择文本类型的所有元素。

From jQuery 1.7, you could use .prop:

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

Before 1.7, you could do:

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

PS: Use $(":text") or $('input[type="text"]') to select all elements of type text.

回复收藏 0 原文

莳間冲淡了誓言ζ 2025-01-05 04:37:08

试试这个：

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

Try this:

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

回复收藏 0 原文

江城子 2025-01-05 04:37:08

或者（更现代）：

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

Or (more modern):

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

回复收藏 0 原文

以歌曲疗慰 2025-01-05 04:37:08

jquery 中没有 text 选择器。您需要使用属性选择器 [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 选择器，但它的效率不如第一个选项，请参阅文档：

$(':text') 相当于 $('[type=text]')，因此选择所有元素。与其他伪类选择器（以“：”开头的选择器）一样，建议在其前面添加标签名称或其他选择器；否则，隐含通用选择器（“”）。换句话说，裸露的 $(':text') 相当于 $(':text')，因此应该使用 $('input:text') 来代替。
附加说明：因为 :text 是 jQuery 扩展，而不是
CSS 规范，使用 :text 的查询不能利用
原生 DOM querySelectorAll() 提供的性能提升
方法。为了在现代浏览器中获得更好的性能，使用 [type="text"]
相反。

请注意，您的 XHTML 无效。您应该关闭 => <输入类型=“文本”/>

There is not text selector in jquery. You need to use the attribute selector [attribute=value]

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

or:

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

there is a :text selector but it's less efficent then the first option, see the docs:

$(':text') is equivalent to $('[type=text]') and thus selects all elements. As with other pseudo-class selectors (those that begin with a ":") it is recommended to precede it with a tag name or some other selector; otherwise, the universal selector ("") is implied. In other words, the bare $(':text') is equivalent to $(':text'), so $('input:text') should be used instead.
Additional Notes: Because :text is a jQuery extension and not part of
the CSS specification, queries using :text cannot take advantage of
the performance boost provided by the native DOM querySelectorAll()
method. For better performance in modern browsers, use [type="text"]
instead.

Note that your's XHTML isn't valid. You should close the <input type="text"> => <input type="text" />

回复收藏 0 原文

北城孤痞 2025-01-05 04:37:08

$("输入").attr("已禁用","已禁用");

回复收藏 0 原文

深海少女心 2025-01-05 04:37:08

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

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

。

"disabled" is a property, not an attribute per-se. Booleans like "checked" or "disabled" don't always get updated (or retrieved) properly when accessing them that way. Use