提交后禁用提交按钮

Question

我正在尝试在用户提交表单后禁用“提交”按钮。

这是我的js

$('.dDisable').click(function(){   
 var value = $('.chars').val();
 var chars = value.length;

 if (chars<10){
         $(".dDisable").submit(function(e){
            $('.chars').css('border','1px solid red');
            return false;
        });
     }
 else{
    $('.dDisable').one('submit', function() {
        $(this).find('input[type="submit"]').attr('disabled','disabled');
        $(this).css('opacity','0.5');
       });  
    } 
 });

由于某些原因，当用户单击“提交”按钮时，textarea（.chars）会显示红色边框，然后整个表单（.dDisable）的不透明度为0.5

这是http://jsfiddle.net/#&togetherjs=UlcR8bJwIM

由于某种原因，它似乎可以正常工作，但表单无法发送。

Answer 1

如果我是正确的，则您尝试在提交之前进行一些验证。

原因文本框显示红色边框，单击“提交”按钮后将执行以下代码

$(".dDisable").submit(function(e){
            $('.chars').css('border','1px solid red');
            return false;
        });

由于上述代码处于“如果”状态并通过，因此您尝试禁用按钮无效。 因为您在“其他”部分中按如下所示禁用了它，

else{
    $('.dDisable').one('submit', function() {
        $(this).find('input[type="submit"]').attr('disabled','disabled');
        $(this).css('opacity','0.5');
       });  
    } 
 }

注意：您必须像这样重构代码，必须写为$(this).attr('disabled','disabled'); 而不是$(this).find('input[type="submit"]').attr('disabled','disabled');

Answer 2

在提交事件中添加

$(document).ready(function () {
    $("#yourFormId").submit(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

要么

的HTML

<form method='post'>
    <button type='submit'>Send</button>
</form>

的JavaScript

$('form').submit(function() {
  $(this).find("button[type='submit']").prop('disabled',true);
});

您可以看到b.w .attr（）与.prop（）的区别

Answer 3

尝试这个：

$(document).ready(function () {
     $(".submitBtn").click(function () {
        $('input[type="submit"]').prop('disabled',true);
         $('#yourFormId').submit();
        });
     });

要么

$(document).ready(function () {
     $(".submitBtn").click(function () {
         $(".submitBtn").attr("disabled", true);
         $('#yourFormId').submit();
        });
     });