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

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

1 个答案: