禁用sumbit上的按钮并在提交后重新启用

我有一个脚本，通过ajax将数据提交到服务器，并且完美地工作。我想要实现的是在提交时禁用按钮并在提交后重新启用它。禁用sumbit上的按钮并在提交后重新启用

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
    $('#new_entry').html(msg); 

      $('.textbox').val(""); 

     }); 
    }); 
});

HTML

<form name="form1" method="post" action="" class="comment"> 
    <p> 
    <label for="comment"></label> 
    <textarea name="comment" id="comment"></textarea> 
    </p> 
    <p> 
    <input type="submit" name="button" id="button" value="Submit Comment"> 
    </p> 
</form>

来源

2015-06-30 i_user

，什么使你不能这样做呢？这只是2行代码添加在你显示的代码中... –

只要更新你的代码中加入两行以下并根据需要它会为你工作。

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $("#button").prop('disabled',true); // disable 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
    $('#new_entry').html(msg); 

      $('.textbox').val(""); 
      $("#button").prop('disabled',false); // enable 



     }); 
    }); 
});

仅供参考 - http://api.jquery.com/prop/

来源

2015-06-30 07:54:32 nikhil

您可以使用prop()像

$(document).ready(function() { 
    $('.comment').on('submit', function(event) { 
     $('#button').prop('disabled', true); 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      $('#button').prop('disabled', false); 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
});

来源

2015-06-30 07:54:37 AmmarCSE

您是否尝试过设置的功能（this.attr('disabled','disabled')）开始禁用ATTR并成功重新启用（this.removeAttr('disabled')）？

来源

2015-06-30 07:55:19 hsstan

-1

禁用点击事件输入。然后启用jQuery Ajax的成功功能。

来源

2015-06-30 07:57:10

我会尝试以下方法：下面的代码

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     document.getElementById("button").disabled = true; 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
     document.getElementById("button").disabled = false; 
    $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
});

来源

2015-06-30 07:57:37

尝试。用户阿贾克斯beforeSend event为

$(document).ready(function() { 
    $('.comment').on('submit', function (event) { 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
      beforeSend: function() { 
       $('#button').attr('disabled', true); 
      }, 
      success: function() { 
       $('#button').attr('disabled', false); 
       $('#new_entry').html(msg); 
       $('.textbox').val(""); 
      }); 
     }); 
    });

来源

2015-06-30 07:58:14

如果你这样做是为了防止双帖，失效按钮是不是做正确的事。你必须始终做到在你的代码，而不是仅仅在DOM：

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     if ($('.comment').data('isWaiting')) { 
      return; 
     } 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
      $('.comment').data('isWaiting', false); 
     }); 
     $('.comment').data('isWaiting', true); 
    }); 
});

来源

2015-06-30 08:08:26

$(document).ready(function() { 
    $('.comment').on('submit', function(event) {    
     event.preventDefault(); 
     var button = $('#button'); 
     button.prop('disabled', true); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      button.prop('disabled', false); 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
});

来源

2015-06-30 08:22:12

禁用sumbit上的按钮并在提交后重新启用

回答

相关问题