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;
        });

由于上面的代码处于“if”状态且已通过，因此您尝试禁用按钮无效。因为您在“else”部分禁用它，如下所示，

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() vs .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(); }); });

提交后禁用提交按钮

3 个答案: