disable submit button without grey out effect

Question

How do I disable an HTML form submit button without it being greyed out?

The problem: I want to grey out an entire form, and having the submit button grey out before the rest of the form does looks silly.

$("#postform").submit(function() {
      //disable submit button
      $("#submitPF").attr("disabled", "disabled");
      //blur form
      $("#postform").animate({opacity: 0.4},250);
      $.post("/POST.php", $("#postform").serialize(),function() {
         //free submit button
         $("#submitPF").removeAttr("disabled");
         //unblur
         $("#postform").animate({opacity: 1},500);
      });
      return false;
   });
}

possible duplicate of [Override greyed out effect of element](http://stackoverflow.com/questions/13539460/override-greyed-out-effect-of-element) — Foreever, Jan 23 '14 at 04:59

score 2 · Answer 1 · answered Aug 01 '11 at 19:15

2

you can style the disabled version with css.

input:disabled

answered Aug 01 '11 at 19:15

locrizak

12,192
12
60
80

score 1 · Answer 2 · answered Aug 01 '11 at 19:16

1

If all you need is for it to not be clickable you could always make a mask layer to go over it. Perhaps a white bg that fades from 0 opacity to 20% opacity. Any clicking on the submit button will not work because of the mask layer in front of it.

answered Aug 01 '11 at 19:16

Joseph Marikle

76,418
17
112
129

score 1 · Accepted Answer · answered Aug 01 '11 at 19:19

1

You could just hijack the button

$("#submitPF").click(function(e) {
    e.preventDefault();
    return false;
});

Just a thought.

answered Aug 01 '11 at 19:19

kasdega

18,396
12
45
89

disable submit button without grey out effect

3 Answers3