0

I'm disabling a button with jQuery. It does work, but there is a strange behavior in Chrome. If I click on the button, it remains with the not-disabled color:

enter image description here

Only if I click again, or if I move the mouse (at least 1 px), the button is displayed as disabled:

enter image description here

Here's my code:

<button id="reset" type="button">Reset</button>

$('#reset').click(function(){
    $(this).attr('disabled',true);
});

For some reason, it does work fine on the demo: http://jsfiddle.net/hjqk00j4/

In my localhost version, I tried stripping parts of the page, js chunks, css parts, etc, but it still won't display the disabled version of the button unless I click again on it. Any ideas?

Andres SK
  • 10,779
  • 25
  • 90
  • 152
  • Unless your version of jQuery is < 1.6, use `prop('disabled',true);` [**See this SO question**](http://stackoverflow.com/questions/5874652/prop-vs-attr) – cssyphus Oct 09 '14 at 00:30
  • Does it fail in Chrome even if you use a super simple version of this with a
    instead of a
    – Nathan Manousos Oct 09 '14 at 00:31

1 Answers1

0

Try this

$('#reset').click(function(){
   $(this).attr('disabled',true);
   $(this).attr('disabled',false);
});
John Stamoutsos
  • 353
  • 1
  • 3
  • 17