提交后禁用提交按钮

时间:2013-12-11 06:45:13

标签: javascript jquery

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

这是我的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

由于某些原因它似乎工作但表格没有发送。

3 个答案:

答案 0 :(得分:0)

在提交事件中添加此内容

$(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()

答案 1 :(得分:0)

试试这个:

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

答案 2 :(得分:0)

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

原因文本框变为红色边框,以下代码在单击提交按钮

时执行
$(".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');