Jquery Mobile's checkboxes change firing twice with phonegap on iOS (but working on Android)

Question

I am using checkboxes in my JQM/Phonegap Build app.

<div id="wavetypes" class=ui-grid-b>
                    <div class=ui-block-a>
                        <input type="checkbox" name="checkbox-t-2a" id="wavetypes_checkboxsmallwave" data-theme="b">
                        <label for="wavetypes_checkboxsmallwave">Small-wave</label>
                    </div>
                    <div class=ui-block-b>
                        <input type="checkbox" name="checkbox-t-2b" id="wavetypes_checkboxperf" data-theme="b">
                        <label for="wavetypes_checkboxperf">Performance</label>
                    </div>
                    <div class=ui-block-c>
                        <input type="checkbox" name="checkbox-t-2c" id="wavetypes_checkboxstepup" data-theme="b">
                        <label for="wavetypes_checkboxstepup">Step-up</label>
                    </div>
                </div>

And I am listening to their change like this

$(document).on('pagecreate','#welcome-page', function(){    

$(document).on('change','#wavetypes_checkboxsmallwave, #wavetypes_checkboxperf, #wavetypes_checkboxstepup',function(){ 

    console.log('-------------------');
    console.log(e.target.tagName.toUpperCase()+' : ' + $(this).attr('id') +', is checked ? : '+$(this).is(":checked"));
    if (e.target.tagName.toUpperCase() === "LABEL") {
        return;
    }
        var proId = $('#chosenpro').find(":selected").val();
        var brandid = $('#chosenbrand').find(":selected").val();
        console.log(proId);
        console.log(brandid);
        if ( !$.isNumeric(proId) ) {
            console.log("proId is not numeric");
            if ( !$.isNumeric(brandid) ) {
                console.log("brandid is not numeric");
                //resetModelsListView(prodata, false, 0, 0, 0);
                //addBoardAndLogoInModelListView();

            } else {
                var targetbrand = prodata[brandid]['brand'];
                //resetModelsListView(prodata, false, 0, targetbrand, 0);
                //addBoardAndLogoInModelListView();
            }
        } else {
            console.log("proId IS numeric");
            var targetproName = prodata[proId]['name'];
            var targetbrand = prodata[brandid]['brand'];

            //LISTVIEW
            //resetModelsListView(prodata, false, 0, targetbrand, targetproName);
            //addBoardAndLogoInModelListView();
        }
    });

...but the boxes don't get checked when I tap on them on Phonegap + iOS.

It works well on desktop or on Phonegap + Android.

Can you help please ?

edit: it seems that the js is being bound twice... so the checkbox checks and unchecks....but I can't figure out why...

edit: the event is fired twice on iOS, here's the console ouput (it gets checked then unchecked...weird !!) :

-------------------
INPUT : checkboxperf, is checked ? : true
-------------------
INPUT : checkboxperf, is checked ? : false

Answer 1

This seems to be a bug in jQuery Mobile. I worked around it by preventing the default behavior of the click and toggling the the inputs checked value manually:

$(document).on('click', '.ui-checkbox', function (event) {
    event.stopPropagation();
    event.preventDefault();

    var $checkboxInput = $(this).find('input');
    var isChecked = $checkboxInput.is(':checked');
    $checkboxInput.attr('checked', !isChecked).checkboxradio('refresh');

    // do your stuff
});

I tested this in JSFiddle (Chrome) and iPhone 4S (iOS 8.1). This solution doesn't seem to work in browser but in my Phonegap app for iOS it does. This indicates that it may not work on other platforms either.

If you are targeting for multiple platforms, I recommend you use your old handler for those and make a function of the code inside your handler.

Answer 2

Had the same issue and addressed it by removing the "for" attribute on "label" element.

My elements were nested as follows:

<label><input type="checkbox" id="opt1" data-mini="true" data-iconpos="right">Option label here</label>

Guessing it's a bug in jQuery Mobile 1.4.5 (with jQuery 1.11.1). It didn't matter if the checkbox was grouped or single in my case.