Buttons not disabled in internet explorer

[simonvane]

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.

[simonvane]

Correction - the javascript to prevent the click is as follows:

$(document).ready(function () {
$('a.ui-disabled').click(function () {
return false;
});
});

Anybody have an opinion on this? Will this be fixed?

[toddparker]

I think we do need to improve how we disable elements for IE. Flagged for 1.2.

[simonvane]

That's great to hear, thanks. I just wondered if there was any chance of getting the fixes into 1.1 so I don't have to include these workarounds? 1.1 is likely to be released before we release our next version but 1.2 I don't think will be.
Thanks.

[sgrebnov]

Hi @toddparker, @Wilto,

I have some additional idea how to disable link button in IE. We can render link buttons in ‘buttons’ plugin instead of ‘buttonmarkup’ plugin. In this case we can use disable() and enable() functions for link buttons the same way as for general buttons. All we need is to add [data-role=’button’] to ‘buttons’ plugin initSelector and remove ‘:jqmData(role='button')’ from ‘buttonmarkup’ plugin initSelectior. It works for IE8/9. In this case we will have 'disabled' attribute and also 'ui-disabled' css class. 'disabled' attribute will make the trick to make link unclickable for IE8/9. Unfortunately I found out that this approach doesn’t work for IE7 because it ignores ‘disabled’ attribute and link stays clickable. As a possible workaround we can temporary rename ‘href’ attribute in disabled() func to ‘hrefTemp’ and set it again in enable() func.

[Wilto]

@sgrebnov Oh, I think we’re mostly squared-up on this now, including IE. The only thing we have left to do for the sake of browsers that don’t support the CSS pointer events property is call preventDefault() (possibly return false) on link-based buttons that have the ui-disabled class attached.

[sgrebnov]

@Wilto I see now, suppose we only need to add small change to buttonMarkup.js to handle click event specially for element with 'ui-disabled' class (preventing the call). I can add this change if you want (and if my understanding is correct)

[simonvane]

Thanks for giving your attention to this issue. Very much appreciated. Is this likely to make it into 1.1?

We have another issue at the moment in Opera Mini. When we load the page first time (in the opera emulator) the button is displayed as disabled but you can still click. If I Ctrl+F5 then the button is properly disabled. Close the emulator and return and this issue is the same again. This is with all of the above fixes in place including the return false in the javascript.

If you could check this out that would be greatly appreciated.

Thanks again.

[simonvane]

Realised what the issue was with the javascript. I was using document ready when I should have been using live i.e:

$("[data-role=page]").live("pageinit", function () {
$('a.ui-disabled').click(function () {
return false;
});
});

[simonvane]

Are you aware that this issue is not fixed in 1.1 RC1? Will it be fixed for 1.1 RTM?
Thanks.

[toddparker]

@gseguin will work with jQ core to find a way to disable events and deal with 1.6 vs. 1.7 differences.

[simonvane]

Thanks, FYI, I was using jQuery 1.7.1.
Cheers.

[simonvane]

This has not been fixed in RC2. I got the impression that it was your intention to fix it. Is this supposed to be fixed?
Thanks.

[toddparker]

We added some styles to make it look more disabled, but we decided that actually managing events to make this truly disabled on IE would require a lot of effort, testing and changes for this stage. Look for this in 1.1.1.

[simonvane]

Thanks for the update Todd. I know that you have had a great deal to do for RC2 but this is somewhat disappointing though considering the statement regarding 1.1 "Our philosophy in 1.1 was to really focus on making the current feature set we had as close to perfect as we could, without sacrificing compatibility." when this is clearly a bug.

Are you able to give any indication as to the intended release date of 1.1.1?

[jaspermdegroot]

@gseguin - Have you been able to look into a way to disable buttons via JS for browsers that don't support CSS property "pointer-events"?

[gseguin]

No I haven't. I can look into it next if you'd like.
On Jun 19, 2012 5:40 AM, "Jasper de Groot" <
reply@reply.github.com>
wrote:

@gseguin - Have you been able to look into a way to disable buttons via JS
for browsers that don't support CSS property "pointer-events"?

---

Reply to this email directly or view it on GitHub:
#3558 (comment)

[toddparker]

Yes please.

On Jun 19, 2012, at 9:25 AM, "Ghislain Seguin" reply@reply.github.com wrote:

No I haven't. I can look into it next if you'd like.
On Jun 19, 2012 5:40 AM, "Jasper de Groot" <
reply@reply.github.com>
wrote:

@gseguin - Have you been able to look into a way to disable buttons via JS
for browsers that don't support CSS property "pointer-events"?

---

Reply to this email directly or view it on GitHub:
#3558 (comment)

---

Reply to this email directly or view it on GitHub:
#3558 (comment)

[gseguin]

Reopening as it seems like the fix failed. Looking into it.