如何使用 jQuery 禁用和启用 input：完整指南

如何使用 jQuery 禁用和启用 input？面向初学者及进阶者的指南

想象一下这个场景：你正在创建一个注册表单，在用户选择国家之前，“城市”字段应该被锁定。或者你有一个在线商店，在用户勾选同意复选框之前，“提交订单”按钮处于非活动状态。熟悉吗？这个任务是任何前端开发人员的家常便饭。今天，我们将用显微镜来剖析它。

“使用 jQuery 禁用/启用 input？” 这个问题是 Stack Overflow 上最热门的问题之一（成千上万的浏览量和数十个答案）。这并非偶然：看似简单的操作背后隐藏着几个新手容易踩的坑。在本指南中，我们不仅会展示代码——我们还会教你像 jQuery 忍者一样思考。开始吧！

为什么不应该使用 .attr() 来处理 disabled？

如果你已经搜索过解决方案，你很可能见过像 $('input').attr('disabled', 'disabled'); 这样的旧建议。这在 jQuery 1.x 时代有效，但今天——这是一条死路。为什么？

• .attr() 处理 HTML 属性，而 .prop() 处理 DOM 对象的属性。
• disabled 属性是一个布尔属性，应该是 true 或 false，而不是一个字符串。
• 使用 .attr('disabled', false) 时，jQuery 可能只是删除该属性，但并不总是能正确重置状态。

现代标准是使用 .prop()。请像记住“主祷文”一样记住它：

// 禁用 input$('#myInput').prop('disabled', true);

// 重新启用 input$('#myInput').prop('disabled', false);

很简单，对吧？但让我们深入探讨一下。

基础示例：禁用和启用单个 input

假设我们有一个电子邮件输入字段和一个触发按钮。我们希望点击按钮时，该字段被锁定或解锁。

<input type="email" id="emailInput" placeholder="输入邮箱"><button id="toggleBtn">锁定字段</button>

<script>$(document).ready(function() {    $('#toggleBtn').on('click', function() {        var $input = $('#emailInput');        var isDisabled = $input.prop('disabled');                // 切换状态        $input.prop('disabled', !isDisabled);                // 更改按钮文本        $(this).text(isDisabled ? '锁定字段' : '解锁字段');    });});</script>

请注意：我们使用了 $(document).ready()——这确保了在执行脚本之前 DOM 已加载。否则，你的代码可能找不到元素。

处理元素组：select、checkbox 和 textarea

.prop() 方法是通用的。它不仅适用于 <input>，还适用于 <select>、<textarea>、<button>，甚至整个元素集合。

一次性锁定表单中的所有元素

想象一下，需要在提交后锁定整个表单，以防止用户更改数据：

<form id="myForm">    <input type="text" name="name" placeholder="姓名">    <input type="email" name="email" placeholder="邮箱">    <select name="country">        <option value="">选择国家</option>        <option value="ru">俄罗斯</option>        <option value="us">美国</option>    </select>    <button type="submit">提交</button></form>

<script>// 锁定表单内的所有 input、select 和 textarea$('#myForm').find('input, select, textarea, button').prop('disabled', true);</script>

还可以更优雅：使用 :input——这是一个 jQuery 伪选择器，可以选择所有元素