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

Question

经过一些重新配置后，我有一些 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>

Answer 1

You should use the focusout event on each element you need to check its value.

I have created a snippet, you can see the updated version of your code.

$(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>