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>

Answer 2

您需要使用jQuery的on Change函数触发事件。您必须将其分配给每个输入字段/选择或任何其他内容，或者将它们赋予相同的类。
这是Doc

示例：

<form>
    <input class="target" type="text" value="Field 1">
    <select class="target">
        <option value="option1" selected="selected">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</form>
<div id="other">
    Trigger the handler
</div>

脚本：

$( ".target" ).change(function() {
    alert( "Handler for .change() called." );
});

如果您提供任何示例代码，我们将为您提供更多帮助。

表单上的任何修改都触发了事件

2 个答案: