禁用然后重新启用点击功能jQuery

Disable then re-enable click function jQuery

本文关键字:功能 jQuery 启用 然后 新启用      更新时间:2023-09-26

我有一个文件上传系统,点击上传按钮后,文件通过AJAX上传。上传文件时,我想禁用"选择图像"按钮上的点击功能。目前,这是文件选择按钮上的点击功能:

$(document).ready(function() {
    $("#file-button").click(function() {
        $('#file').trigger('click');
    });
});

这很好,但我想在XmlHttpRequest的进度阶段禁用单击功能,然后在从服务器收到200响应时重新启用单击功能。我尝试过bind()unbind(),它在Chrome中运行良好,但在firefox中,在上传过程中,按钮无法点击,这正是我想要的,然后在我从服务器得到响应后,按钮被重新启用,但在firefox中同时打开了两个文件选择对话框窗口。这是因为上面的函数,我再次使用bind()绑定函数。有人对如何在不重新输入点击事件的代码(功能)的情况下启用然后禁用按钮有什么建议吗。

像这样的东西会更可取:

$('#file-button').disable();
$('#file-button').enable();

我试过on()off(),但它们似乎也不起作用。

解决方案——感谢Eric

我将最初的点击功能更改为:

$(document).ready(function() {
    $("#file-button").click(function() {
      if ( $('#file-button').attr('disabled') == "disabled" ) {
        return false;
      }
      else {
          $('#file').trigger('click');
      }
    });
});

我设置了以下禁用按钮

$('#file-button').attr('disabled','disabled');

这是为了重新启用它:

$('#file-button').removeAttr('disabled');

使用jQuery$.prp()函数禁用按钮:

$("input[type=submit]").prop('disabled', true);

在点击处理程序中添加一个条件,以检查按钮是否被禁用:

$("#file-button").click(function() {
  if (!$(this).is(':disabled')) {
    $('#file').trigger('click');
  }
});

稍后重新启用按钮:

$("input[type=submit]").prop('disabled', false);

或者,如果涉及以下表单,您可以使用提交事件而不是单击:

$("#whatever-your-form-is").on('submit', function() {
  $('#file').trigger('click');
});

尝试AttrjQuery函数。

$('#file-button').attr('disabled','disabled');
$('#file-button').removeAttr('disabled');

测试代码

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $("#file-button").click(function(e)
        {
            e.preventDefault();
            $(this).attr('disabled','disabled');
            return false;
        });
    });
</script>
<input type="button" id="file-button" value="ClickMe" />

您必须参考输入按钮才能禁用按钮,

低于

  $("input[type=submit]").prob('disabled', true);
  $("inpur[type=submit]").prob('disabled', false);