twitter-bootstrap 'disabled' class not working on ie9

Question

Using bootstrap, when you add '.disabled' class to a button, it changes its opacity and disable button click.

This is working on current versions of Chrome and Firefox.

On Internet Explorer 9, I'm getting the button to change its opacity, but when I click it, it submits my form (although cursor icon changes to a prohibition sign).

Is there any way to fix this?

Answer 1

<button type="button" class="btn btn-large btn-primary disabled" 
   disabled="disabled">Primary button</button>

<button type="button" class="btn btn-large" disabled>Button</button>

I tried using the above buttons works fine for me in all the browsers.

Note:

 <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
    <a href="#" class="btn btn-large disabled">Link</a>

Use disabled class in case of links.

Cheers!!!

Answer 2

I know this has been asked long time ago but I have ran into the same issue.

This won't work under IE < 11 because Bootstrap is using "pointer-events" css property which is not supported by IE 10 and earlier. (Can I Use).

I came up with this simple JS for buttons:

$('button.disabled').prop('disabled', true);

for links:

$('a.disabled').click(function(){
       $(this).preventDefault();
});

I've hope that helps.