jQuery实现：检测输入框值变化，动态启用/禁用提交按钮

看起来你已经有了一个不错的开头，我来帮你补全并优化这段代码，完美实现「页面加载预填充数据，仅当用户修改输入框值且与原始值不同时启用提交按钮」的需求。

核心思路 #

1. 页面加载时，保存所有需要监控的输入框的原始值；
2. 监听输入框的实时变化事件；
3. 每次变化时，对比当前值与原始值，只要有一个输入框值不同，就启用提交按钮；若全部恢复原始值，则重新禁用按钮。

基础实现代码（针对固定输入框） #

$(document).ready(function() {
    // 用对象统一管理所有输入框的原始值，比零散变量更易维护
    const originalValues = {
        start: $('#algorithmStart').val().trim(),
        stop: $('#algorithmStop').val().trim(),
        algorithm: $('#algorithmSelect').val().trim() // 假设算法选择框的ID是这个
        // 可以继续添加其他需要监控的输入框，比如$('#inputName').val().trim()
    };

    // 初始状态禁用提交按钮
    $('#submitBtn').prop('disabled', true);

    // 监听所有目标输入框的变化事件（input实时响应打字，change处理下拉框/单选框失焦变化）
    $('#algorithmStart, #algorithmStop, #algorithmSelect').on('input change', function() {
        let hasChanged = false;
        
        // 逐一对比当前值与原始值
        hasChanged = hasChanged || ($('#algorithmStart').val().trim() !== originalValues.start);
        hasChanged = hasChanged || ($('#algorithmStop').val().trim() !== originalValues.stop);
        hasChanged = hasChanged || ($('#algorithmSelect').val().trim() !== originalValues.algorithm);
        // 其他输入框同理添加判断
        
        // 根据是否有值变更，设置提交按钮的禁用状态
        $('#submitBtn').prop('disabled', !hasChanged);
    });
});

优化方案（支持批量输入框，扩展性更强） #

如果你的页面有很多需要监控的输入框，给它们统一加一个类（比如monitor-input），然后用遍历的方式处理，不用一个个写ID：

$(document).ready(function() {
    const originalValues = {};
    
    // 遍历所有带monitor-input类的输入框，批量保存原始值
    $('.monitor-input').each(function() {
        const inputId = $(this).attr('id');
        originalValues[inputId] = $(this).val().trim();
    });

    $('#submitBtn').prop('disabled', true);

    // 监听所有目标输入框的变化
    $('.monitor-input').on('input change', function() {
        let hasChanged = false;
        
        // 遍历检查每个输入框的值是否变化
        $('.monitor-input').each(function() {
            const inputId = $(this).attr('id');
            if ($(this).val().trim() !== originalValues[inputId]) {
                hasChanged = true;
                return false; // 一旦发现变化就跳出循环，提升性能
            }
        });

        $('#submitBtn').prop('disabled', !hasChanged);
    });
});

对应的HTML只要给输入框加类即可：

<input type="text" id="algorithmStart" class="monitor-input">
<input type="text" id="algorithmStop" class="monitor-input">
<select id="algorithmSelect" class="monitor-input">...</select>

特殊情况处理 #

• 动态生成的输入框：如果输入框是通过AJAX动态加载的，需要用事件委托：

  $(document).on('input change', '.monitor-input', function() {
      // 内部逻辑和上面一致
  });
  

• 复选框/单选框：这类控件需要对比选中状态而非val()，比如：

  // 初始化保存原始选中值
  originalValues['radioGroup'] = $('input[name="radioGroup"]:checked').val();
  
  // 监听时判断
  const currentChecked = $('input[name="radioGroup"]:checked').val();
  hasChanged = hasChanged || (currentChecked !== originalValues['radioGroup']);
  

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