javascript - 当3个表单区域需要值时，通过jQuery处理按钮启用

经过一些重新配置后，我有了一些jQuery，可以处理在字段具有值时启用“保存”按钮的情况：

$(document).ready(function () {
  $('.save-button').attr('disabled', true);
  $('#selection').keyup(function () {
    if ($('#selection').val().length != 0) {
      $('.save-button').attr('disabled', false);
    } else {
      $('.save-button').attr('disabled', true);
    }
  });
});

...但是我现在意识到只有在三个单独的表单元素具有值时才应启用此按钮-其中两个是输入字段，一个是文本区域。

问题是，这些可以以任何顺序填写，因此，当所有三个都具有值时，如何确保运行检查以确保启用“保存”按钮？换句话说，我可以使用什么事件来检查？

有问题的三个ID是：selection，schedule和json-data

这是我相关的HTML：

<div class="form-group">
  <label>Job Name</label>
  <input type="text" class="job-name form-control" id="selection">
</div>

<div class="form-group">
  <div><label for="meeting-time">Schedule</label></div>
  <input type="datetime-local" class="job-schedule form-control" min="getDateDefault()" max="getEndDate()"
    id="schedule">
</div>

<div class="form-group">
  <label>Repeat Every</label>
  <input type="text" class="job-repeat-every form-control">
</div>

<div class="form-group">
  <label>Job Data (json)</label>
  <textarea class="job-data form-control" id="json-data">{}</textarea>
</div>

<div class="form-group">
  <span class="btn btn-default btn-success save-button" data-action="save">Save</span>
  <span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>

最佳答案

您应该在需要检查其值的每个元素上使用focusout事件。
  
  我创建了一个代码段，您可以看到代码的更新版本。

$(document).ready(function () {

    $('.save-button').attr('disabled', true);

    $('#selection, #schedule, #json-data').focusout(function () {

        if ($('#selection').val() == "" ||
            $('#json-data').val() == "" ||
            $('#schedule').val() == ""
        ) {

            $('.save-button').attr('disabled', true);

        } else {

            $('.save-button').attr('disabled', false);

        }

    });

});

.btn[disabled="disabled"] {
  color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label>Job Name</label>
  <input type="text" class="job-name form-control" id="selection">
</div>

<div class="form-group">
  <div><label for="meeting-time">Schedule</label></div>
  <input type="datetime-local" class="job-schedule form-control" min="getDateDefault()" max="getEndDate()"
    id="schedule">
</div>

<div class="form-group">
  <label>Repeat Every</label>
  <input type="text" class="job-repeat-every form-control">
</div>

<div class="form-group">
  <label>Job Data (json)</label>
  <textarea class="job-data form-control" id="json-data">{}</textarea>
</div>

<div class="form-group">
  <span class="btn btn-default btn-success save-button" data-action="save">Save</span>
  <span class="btn btn-default btn-warning" data-action="cancel">Cancel</span>
</div>