JS/jQuery实现：提交按钮点击后禁用，仅邮箱输入框值变更时启用

嘿，作为JS和jQuery新手，这个需求其实很好实现，我给你整理了一套清晰的代码方案，附带详细解释，你可以直接套用：

第一步：补全完整的HTML结构 #

首先我帮你补全了表单和提交按钮的完整代码（你之前只提供了输入框部分）：

<form id="email-form">
  <input autocomplete="off" type="email" name="email" id="g-email" class="form-control required order" placeholder="Email address">
  <button type="submit" id="submit-btn">提交</button>
</form>

第二步：jQuery逻辑实现 #

下面的代码会帮你完成核心功能，我加了详细注释，方便你理解每一步的作用：

$(document).ready(function() {
  // 初始化变量，用来存储提交时的邮箱值
  let submittedEmail = '';
  // 提前获取DOM元素，避免重复查询，提升性能
  const $submitBtn = $('#submit-btn');
  const $emailInput = $('#g-email');

  // 监听表单的提交事件
  $('#email-form').on('submit', function(e) {
    // 关键：阻止表单默认提交行为，这样页面不会刷新，输入框内容也不会被清空
    e.preventDefault();
    
    // 禁用提交按钮
    $submitBtn.prop('disabled', true);
    
    // 记录下提交时的邮箱值（去除前后空格，避免空格干扰判断）
    submittedEmail = $emailInput.val().trim();
    
    // 👉 这里可以添加你自己的提交逻辑，比如发送AJAX请求到后端
    // 示例：
    // $.ajax({
    //   url: '/你的提交接口',
    //   method: 'POST',
    //   data: { email: submittedEmail },
    //   success: function(res) {
    //     console.log('提交成功！', res);
    //   },
    //   error: function(err) {
    //     console.error('提交失败', err);
    //   }
    // });
  });

  // 监听邮箱输入框的内容变化：input事件实时响应输入，change事件响应失去焦点时的变化
  $emailInput.on('input change', function() {
    // 获取当前输入的邮箱值（同样去除前后空格）
    const currentEmail = $(this).val().trim();
    
    // 对比当前值和提交时的值：不一样就启用按钮，一样则保持禁用
    if (currentEmail !== submittedEmail) {
      $submitBtn.prop('disabled', false);
    } else {
      $submitBtn.prop('disabled', true);
    }
  });
});

几个关键细节说明 #

• 阻止默认提交：e.preventDefault()是核心，它避免了表单提交时的页面刷新和内容清空，完全符合你的需求。
• 实时检测输入：同时监听input和change事件，既能让用户输入时立刻触发按钮状态变化，也能覆盖用户粘贴内容后失去焦点的场景。
• 去除空格干扰：用trim()处理邮箱值，避免用户只输入空格就触发按钮启用，逻辑更严谨。

内容的提问来源于stack exchange，提问作者Ash