jQuery表单字段变更检测代码：Input type=File无法启用提交按钮求助

首先，问题出在input[type="file"]的事件触发机制上：普通输入框的内容变化会触发input事件，但文件选择框的内容变化（选择文件）只会触发change事件，而且如果用户选择同一个文件，由于浏览器的安全限制，change事件不会再次触发（因为文件路径没有变化）。

下面是修正后的代码，覆盖所有输入类型的变更检测：

$(document).ready(function() {
  // 监听所有需要检测的输入字段的input和change事件
  $('input[type="text"], input[type="email"], input[type="file"], textarea, select').on('input change', function(e) {
    // 处理file输入选择同一文件的情况：重置value，下次选择同一文件也能触发change事件
    if ($(this).is('input[type="file"]') && e.type === 'change') {
      var $fileInput = $(this);
      // 克隆一个新的file输入替换原有的，重置状态
      var $newFileInput = $fileInput.clone(true);
      $fileInput.replaceWith($newFileInput);
    }
    checkFormChanges();
  });

  // 检测表单是否有变更的核心逻辑
  function checkFormChanges() {
    var hasChanges = false;
    // 遍历所有需要检测的字段，判断是否有变更（可根据实际需求调整判断逻辑）
    $('input[type="text"], input[type="email"], input[type="file"], textarea, select').each(function() {
      var $field = $(this);
      // 对于file输入，判断是否有文件被选择
      if ($field.is('input[type="file"]')) {
        if ($field[0].files.length > 0) {
          hasChanges = true;
          return false; // 跳出循环
        }
      } else {
        // 对于普通输入，判断当前值是否和初始值不同（需提前存储初始值）
        if ($field.val() !== $field.data('initial-value')) {
          hasChanges = true;
          return false; // 跳出循环
        }
      }
    });
    // 启用/禁用提交按钮
    $('button[type="submit"]').prop('disabled', !hasChanges);
  }

  // 页面加载时存储所有字段的初始值（关键步骤，用于判断是否变更）
  $('input[type="text"], input[type="email"], input[type="file"], textarea, select').each(function() {
    var $field = $(this);
    if ($field.is('input[type="file"]')) {
      // file输入的初始值是空的文件列表
      $field.data('initial-value', []);
    } else {
      $field.data('initial-value', $field.val());
    }
  });
});

关键要点解释： #

• 事件监听：同时监听input和change事件，确保普通输入框和文件选择框的变更都能被捕获。
• 处理同一文件选择：当用户选择同一个文件时，通过克隆并替换file输入框的方式重置其状态，这样下次选择同一文件时仍能触发change事件。
• 初始值存储：页面加载时通过data属性存储每个字段的初始值，用于后续判断是否发生变更。对于file输入，初始值标记为空文件列表。
• 变更判断逻辑：针对file输入单独判断是否有文件被选择，普通输入则对比当前值和初始值。

如果你的原有代码已经实现了初始值存储逻辑，只需要调整事件监听和file输入的特殊处理部分即可。

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