Question

所以我需要一个按钮在点击后被禁用，然后在几秒后它应该再次启用。我添加了一个类按钮禁用，因为我想在同一页面上使用它几次。这是我试过的

$(document).on('click', '.button-disabled', function (){
                $(this).prop('disabled', true);
                setTimeout(function() {
                $(this).prop('disabled', false);
                }, 3500);
                }); 


<button type="button" id="buttonSettings" class="btn btn-success button-disabled">Sacuvaj</button>

我在网站上查找了类似的问题，但这些都没有帮助，因为每次按钮都会在点击后被禁用，但它永远不会再次启用。任何帮助将不胜感激。

Answer 1

setTimeout始终在全局范围内执行，因为它确实window.setTimeout（或更准确地WindowTimers），因此回调this内部将会窗口，而不是元素。

您必须存储对元素的引用

$(document).on('click', '.button-disabled', function (){

      var element = $(this);

      element.prop('disabled', true);

      setTimeout(function() {

           console.log(this); // gives "window"

           element.prop('disabled', false);

      }, 3500);
});

作为旁注，较新的浏览器会在setTimeout中接受其他参数，因此您也可以

setTimeout(function(element) {
    $(element).prop('disabled', false);
}, 3500, this);

或使用bind()

setTimeout(function() {
    $(this).prop('disabled', false);
}.bind(this), 3500);

Answer 2

创建this＆amp;的实例使用实例删除禁用。可以尝试下面的内容。

＆＃13;

$(document).on('click', '.button-disabled', function (){
     var self = $(this);
     $(this).prop('disabled', true);
     setTimeout(function() {
        $(self).removeAttr('disabled');
     }, 3500);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" id="buttonSettings" class="btn btn-success button-disabled">Sacuvaj</button>

＆＃13;

在jquery中禁用然后启用按钮

2 个答案: