input[type="submit"][disabled] not working for IE8

Question

I am having 3 states for my input submit button.

1. Active : Orange button
2. Mouse down : Dark gray button

3. Disabled : Light gray button

   <input type="submit" id="savebtn" class="save_button"/>

CSS:

save_button {
  background: url('/Images/save_button_active.png') no-repeat scroll 0 0 transparent;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  height: 33px;
  padding-bottom: 4px;
  padding-right: 19px;
  width: 216px;
  border: solid 0px;
  color: #fff!important;
  background-position: 0px -30px;
}

.save_button-active
{
  background:url('/Images/save_button_mousedown.png') no-repeat scroll 0 0 transparent;
  cursor: pointer;
  font-size:14px;
  font-weight: bold;
  height: 33px;
  padding-bottom: 4px;
  padding-right: 19px;
  width: 216px;
  border:solid 0px;
  color:#fff!important; 
  background-position:0px 2px;
  margin-right:20px\0;
}
.save_button[type="submit"]:disabled, .save_button[type="submit"][disabled]
{
 background:url('/Images/save_button_disabled.png') no-repeat scroll 0 0 transparent;
 cursor: pointer;
 font-size:14px;
 font-weight: bold;
 height: 32px;
 padding-bottom: 4px;
 padding-right: 19px;
 width: 216px;
 border:solid 0px;
 color:#fff!important; 
 background-position:0px 1px;
 margin-right:20px\0;
}

This is working well with Chrome and other IE versions except for IE8, the 3rd disabled state is turning to orange and gray text.

I am adding active classes using jquery.

fnMouseDownEvents(buttonObj, mousedownClass, mouseupClass);

I pass something below:

fnMouseDownEvents('save_button', 'save_button-active', 'save_button')

I search the stackoverflow for various solution, tried different solution, but in vain.

Am I missing something here?

Answer 1

I simply the function. Is that what you want?

$(".save_button").mouseup(function() {
   $(this).attr("disabled", "disabled");
});

Check this at jsfiddle.