jquery/jquery-mobile — Issue #3558: Buttons not disabled in internet explorer
Author: simonvane
Created: 2012-02-09 15:10:19+00:00
State: open

I am trying to disable links with data-role="button".

The documentation states "Note that you can disable buttons created from button or input-based markup, but not links with a role of button. Links don't have a parallel disabled feature in HTML, but if you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect." in http://jquerymobile.com/test/docs/forms/docs-forms.html.

I have tried this in the html below:

<a href="http://www.bbc.co.uk" data-role="button" class="ui-disabled">BBC</a>

The problems I have are:
1) In IE 7 to 9 the pointer is a hand rather than the default.
2) In IE9 the button has the appearance of being disabled but clicking on the button still goes to the uri.
3) In IE 7 and 8 the button does not display as disabled and can be clicked on.
4) In opera mobile browser the link can be clicked on.

Styling issues aside I think the main issue is that "pointer-events: none;" in the ui-disabled style is not standard on anchor tags. My understanding is that it is for use with svg though I may be wrong about that.

I have worked around the issue with the following javascript:
$(document).ready(function () {
$('a.ui-disabled').click(function (event) {
event.preventDefault()
});
});

and the following styles only included if the browser is IE:
/* Fix to ensure cursor is correct for disabled anchor buttons in IE 7 - 9. */
.ui-disabled
{
cursor: default !important;
}

/* IE 8 - Fix to make buttons opaque for disabled */
.ui-disabled
{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE 8 */
}

/* IE 7 - Fix to make buttons opaque for disabled */
*:first-child+html .ui-disabled
{
filter: alpha(opacity=30);
height:1%;
}

Am I doing something wrong in the first place and if not is this a suitable fix?

Is it something you'd be able to incorporate into the core product?

Thanks a lot.

P.S. I have tried with the latest version and I believe it is still an issue.