javascript - 对我的表单进行任何修改都会触发事件

Question

我制作了一个带有输入文本和选择的表单。要提交表单，我希望用户单击验证按钮以检查所有字段是否已正确归档。如果是，则最初禁用的提交按钮现在已启用。

问题是，我希望如果用户再次修改表单中的任何内容，那么按钮会返回禁用，以便他必须再次验证才能提交。

为此，我想找到一个 jQuery 事件，该事件会触发表单上的任何事件，以将提交按钮转回以再次禁用。

知道我该怎么做吗？

Answer 1

您可以使用表单 (delegateTarget)，然后从中选择您希望在附加事件处理程序范围内的输入类型 ( https://stackoverflow.com/a/3165569/125981 )，并禁用该类型所需的类型。由于可能有多个，我已经包含了两个提交按钮和一个未禁用的重置按钮的示例。要扭转这种情况，您需要有某种方法来清除它们，因此我添加了一个自定义事件的示例。

添加了一个重置​​事件处理程序，因为它可能会在这里发挥作用。

$('#myform').on('change keyup', 'input[type="text"], select', function(event) {
    $(event.delegateTarget).find('input[type="submit"]').each(function() {
      console.log("disable:", this);
      this.disabled = true;
    });
  })
  .on('all-clear', function(event) {
    $(event.delegateTarget).find('input[type="submit"]').each(function() {
      this.disabled = false;
    });
  })
  .on('click', '#allclear', function(event) {
    $(event.delegateTarget).trigger('all-clear');
  })
  .on('reset', function(event){
      // do whatever is desired on the reset of the form
  });
  .find('input[type="text"]').trigger('change'); //IF you want disabled initially

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="myform">
  <input type="text" value="text stuff" />
  <select>
    <option value="option1" selected="selected">First Option</option>
    <option value="option2">Another Option</option>
  </select>
  <input type="submit" value="Submit" />
  <input type="submit" value="Possible Submit" />
  <input type="reset" value="Reset" />
  <button id="allclear" type="button">All clear</button>
</form>