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

Disable then re-enable click function jQuery

提问by ramo

I have a file upload system, after the upload button is clicked, the file is then uploaded through AJAX. While the file is uploaded I want to disable the click function that is on the "Select Images" button. Currently this is the click function on the file-selection button:

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

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

That works fine, but I want to disable the click function in the progress phase of the XmlHttpRequest, and then re-enable the click function when I get a 200 response from the server. I have tried bind()and unbind()and it works fine in Chrome, but in firefox, during the upload, the button cannot be clicked, which is what I want, and then after I get a response from the server the button is re-enabled, but in firefox two file-selection dialogue windows open at the same time. This is because of the function above, and me binding the function again using bind(). Does anyone have any suggestions on how to enable, then disable the button without re-entering the code (function) of the click event.

这工作正常，但我想在 XmlHttpRequest 的进度阶段禁用单击功能，然后在从服务器收到 200 响应时重新启用单击功能。我已经尝试过bind()并且unbind()它在 Chrome 中工作正常，但是在 Firefox 中，在上传过程中，无法单击该按钮，这正是我想要的，然后在我收到服务器的响应后，该按钮被重新启用，但是在firefox 两个文件选择对话窗口同时打开。这是因为上面的函数，我再次使用bind(). 有没有人对如何启用，然后禁用按钮有任何建议，而无需重新输入点击事件的代码（功能）。

Something like this would be preferable:

这样的事情会更可取：

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

I have tried the on()and off()and they do not seem to work either.

我已经尝试过on()并且off()它们似乎也不起作用。

回答by ramo

SOLUTION-- thanks to Eric

解决方案——感谢埃里克

I changed my initial click function to the following:

我将初始点击功能更改为以下内容：

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

And I set the following to disable the button

我设置了以下内容来禁用按钮

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

And this to re-enable it:

这是重新启用它：

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

回答by Eric Freese

Disable the button using jQuery $.prop()function:

使用 jQuery $.prop()函数禁用按钮：

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

Add a conditional to the click handler to check if the button is disabled:

向单击处理程序添加条件以检查按钮是否被禁用：

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

Later on re-enable the button:

稍后重新启用按钮：

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

---

---

Or you might be able to use the submit event instead of click, if there is a form involved:

或者，如果涉及表单，您也可以使用提交事件而不是单击：

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

回答by Dipesh Parmar

Try AttrjQuery function.

试试AttrjQuery 函数。

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

Tested Code

测试代码

<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" />

回答by EnterJQ

You have to refer input button in order to disable button ,

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

Something like below

像下面这样

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