md-checkbox breaks on mobile with Ionic

[CR88]

Whenever I test on a mobile device, the checkboxes don't change, so if I set it to true from default, it stays true and isn't changeable. The ink animation does it's thing, but the box doesn't change it's value, and the tick doesn't change.

It works 100% fine on desktop, the issue is only with viewing on mobile devices.

EDIT: Also the buttons no longer work using ng-href or just href, but they do on desktop.

[ngraef]

What OS & browser versions? Do you have a codepen demo? Checkboxes work fine for me on Android 5.0/Chrome 41.

[CR88]

Works fine on: Safari Version 8.0.4 on OS X, Chrome Version 41.0.2272.104 on OS X, Firefox Version 36.0.4 on OS X

Doesn't work on Safari on iOS 8.1, you can test this via the Develop tab on Safari on OS X too,
Doesn't work on Chrome on Android 5.0, not sure what version of Chrome

This is my codepen
http://codepen.io/anon/pen/LEaMEd

[ngraef]

Ah ok, you're using Ionic. There's a known issue with touch events. See #1826.

[CR88]

The "8.3 Touch events not firing ng-click on Android/IOS hybrid apps/mobile browsers" issue had a solution in it that has fixed it, hopefully there will be a proper fix soon?

[buu700]

I was experiencing this this today as well; it seems to be a subset of issue #2090 (i.e. the event is being triggered twice, not zero times).

This temporary hack resolved it for me for now:

$('md-checkbox').click(function () {
    var $this   = $(this);

    setTimeout(function () {
        $this.css('pointer-events', '');
    }, 500);

    $this.css('pointer-events', 'none');
});