Question

I want to disable submit button once it is clicked..Let me explain it as below

1. On form submission validation is done using ajax call and submit button is disabled using
   .attr("disabled",true);

2. If response is ‘Fail’ (i.e. validation fails) button is clickable again using .attr("disabled",false) in ajax response

This work absolutely fine in FF and chrome but in IE8 whenever button is pressed, effect of being enable to disable is visible (button is normal when clicked, visible like disabled). don’t want this momentarily change in appearance on IE8.

I even tried some suggestion like using .attr("disabled","disabled"); and .removeAttr("disabled"); to make it disable and enable.
Code snippets:-

$("#submitBtn").click(function(event) {
    event.preventDefault();
    $("#submitBtn").attr('disabled',true);
    dataToPost = $("#Form").serialize();
    $.ajax({
        type: "POST",
        url: 'FormValidation',
        data: dataToPost ,
        success: function(response){
            if(response.status=='FAIL')
            {
                $("#submitBtn").attr('disabled',false);
                 //Some code
          }
             else{
        /* submit the form to if validation is successful */
                saveData(dataToPost);
            }

Answer 1

Unfortuntely if you use the disabled attribute, no matter what you try IE will just default the colour of the text to grey, with a wierd white shadow…thing… yet all other styles will still work. :-/ as answered here.