jQuery交互后提交按钮不起作用答案

【问题标题】：Submit button not working after jQuery interactionjQuery交互后提交按钮不起作用
【发布时间】：2019-07-15 16:46:38
【问题描述】：

我有一个表单，可以将文件上传到服务器。一切都按预期工作，直到我向提交按钮添加了一些验证逻辑（在没有选择文件时禁用它并在选择后启用它）。现在我的提交不再触发 POST 操作。我需要明确添加onclick 监听器吗？我假设jQuery修改了一些阻止点击监听器默认触发的属性？

<form name="uploadFile" method="POST" action="uploadFile" enctype="multipart/form-data">
  <input type="file" name="file" id="file"><br />
  <input type="submit" name="submit" id="importkey" value="Import Key" />
</form>

function setSubmitBtnState() {
  var sb = jQuery('#importkey');
  var dclasses = 'ui-button-disabled ui-state-disabled';

  if (jQuery('#file').val() == '') {
    sb.attr('disabled', 'disabled');
    sb.addClass(dclasses);
  } else {
    sb.removeAttr('disabled');
    sb.removeClass(dclasses);
  }
}

Chrome 调试器显示：按钮禁用状态

<input type="submit" name="submit" id="importkey" value="Import Key" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled" role="button" aria-disabled="false" disabled="disabled">

按钮启用状态

<input type="submit" name="submit" id="importkey" value="Import Key" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">

所以这个类被删除了。

这段代码解决了这个问题。

jQuery("#importkey").button().click(function() {
});

【问题讨论】：

您是否检查了 DOM 以确保正确删除了 disabled 属性和类？
@RoryMcCrossan - 一旦我选择了文件，该按钮就会启用。但它什么也没做。
ui-state-disabled 添加pointer-events: none 所以确保类也被删除。
@RoryMcCrossan - 类已被删除，请查看我的更新。
那么什么时候调用 setSubmitButtonState 呢？

标签： javascript jquery forms jsp buttonclick

【解决方案1】：

您需要通过正确调用setSubmitBtnState() 进行正确验证。试试这个：-

$('form[name="uploadFile"]').submit(function(e){
   return setSubmitBtnState();
});

function setSubmitBtnState() {
 var isValid = true;
 var sb = jQuery('#importkey');
 var dclasses = 'ui-button-disabled ui-state-disabled';

if (jQuery('#file').val() == '') {
   isValid = false;
  sb.attr('disabled', 'disabled');
  sb.addClass(dclasses);

} else {
   isValid = true;
  sb.removeAttr('disabled');
  sb.removeClass(dclasses);
 }
 return isValid;
}

【讨论】：