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

Question

我有一个表单，我将文件上传到服务器。一切都按预期工作，直到我向提交按钮添加了一些验证逻辑（在没有选择文件时禁用它并在选择后启用它）。现在我的提交不再触发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() {
});

Answer 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;
}