jQuery：检查多个输入，并在更改

Question

我必须在输入框上显示几个来自我的数据库的值，这些值在页面加载时预填充。用户可以更改这些值，并且仅当值更改且不同时，“提交”按钮才会启用。

为清晰起见，这是一张图片：

如您所见，“提交”按钮已被禁用。

到目前为止，这是我的jQuery：

$(document).ready(function() {
    let originalStart = $('#algorithmStart').val();
    let originalStop = $('#algorithmStop').val();
    let originalAlgorithm = $('#algorithmSelect').val();
    let originalResultName = $('#resultName').val()

    // Detect changes to the baseline parameters    
    $('.checkChanges').change(function() {                                                      
        var thisVal = $(this).val();

        // Enable submit button if the parameters are changed
        if ($.inArray(thisVal, [originalStart, originalStop, originalAlgorithm, originalResultName]) == -1) {
            $('#submitChanges').removeAttr('disabled');                                         
        } else {
            $('#submitChanges').attr('disabled', 'disabled');
        }
    });
});

所有输入元素都有一类 checkChanges ，因此在 change（）上运行该函数，通过 $将新值与原始值进行比较.inArray（），如果按钮不同，则启用按钮。

问题是如果我改变了多于1个值，按钮就会启用，但是如果我回到其中一个输入的原始值，那么按钮会再次被禁用，即使有仍然是不同的价值观。

例如，将开始从20更改为200，将停止从500更改为5000，启用按钮，这是正确的，但如果我将开始从200更改回20，则按钮会再次变灰，即使停止仍然是5000并且与原始值不同。

我在考虑使用每个（）以及更改（），但我无法正确链接它们，IE：

$('.checkChanges').each().change(function() { //... });

不起作用。如果不为每个与每个原始值进行比较的输入编写几个检查案例，我将如何进行此操作？

Answer 1

您应该能够将它具有的值与页面加载时的值进行比较，看它是否不同。

＆＃13;

＆＃13;

var $elements = $('.checkChanges');

$elements.on('change', function() {
  if ($elements.filter(function(){ return this.value != this.getAttribute('value'); }).length) {
    $('#submitChanges').removeAttr('disabled');  
  } else {
    $('#submitChanges').attr('disabled', 'disabled');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="checkChanges" value="test1">
<input type="text" class="checkChanges" value="test2">
<button id="submitChanges" disabled>Weee</button>

＆＃13;

＆＃13;

＆＃13;