Really strange checkbox issue only on some Android devices

[luv2hike]

I have a mobile web app that works fine on iOS and 4 of 7 Android devices we've tested, but on 3 of them, all <4.4(kitkat) the checkboxes cannot be checked.  It "bounces" like a double-tap has happened so the box checks then unchecks immediately.  Again, on everything else, it checks fine.  I've rewritten it once to simply the bindings and upgraded from KO 2.0 to 3.0, but still have the issue.  It did get a little "better" in that now I can check using the white square itself, but if I tap on the text of the label, it does the check/uncheck bounce like always.

At this point, I'm stuck and need some more expert eyes to see what I'm doing wrong or tell me if it's an Android issue that I've not been able to find on the web.

Here is the pertinent code starting with subset of the HTML:

<ul class="checkradio">
    <li><label for="box1" data-bind="css: { dis: viewModel.boxGrayed('value1', viewModel.box1.id()) }"><input id="box1" value="value1" type="checkbox" data-bind="checked: viewModel.pickList" />Item One<span data-bind="text: boxOrderNums.firstPickOrder"></span></label><span class="arrow jump" data-bind="visible: boxGrayed('value1', viewModel.box1.id()), click: function() { alert('destOne'); }">Go to</span></li>
    <li><label for="box2" data-bind="css: { dis: viewModel.boxGrayed('value2', viewModel.box2.id()) }"><input id="box2" value="value2" type="checkbox" data-bind="checked: viewModel.pickList" />Item Two<span data-bind="text: boxOrderNums.secondPickOrder"></span></label><span class="arrow jump" data-bind="visible: boxGrayed('value2', viewModel.box2.id()), click: function() { alert('destTwo'); }">Go to</span></li>
</ul>

Here is the JS:

var viewModel = {
    pickList: ko.observableArray([]),
    boxOrderNums: {
        firstPickOrder: ko.observable(""),
        secondPickOrder: ko.observable("")
    },
    box1 = new Box(),
    box2 = new Box()
};

viewModel.boxGrayed = function(st, stid) {
    return $.inArray(st, this.pickList()) !== -1 && stid > 0;
}.bind(viewModel);

// in real life, this is a complex object in different file with prototyped methods, etc.
function Box()
{
    this.id = ko.observable(0);
}

// fake the AJAX data
$(document).ready(function() {
    viewModel.box1.id(101);
    viewModel.box2.id(201);
});

CSS to style the checkboxes for mobile:

input[type=checkbox] {
    width: 22px;
    height: 21px;
    display: inline-block;
    -webkit-appearance: none;
    border: 1px solid black;
    margin-top: -2px;
}
input[type=checkbox]:checked {
    background: green; /* in real life, this is a checkmark image url */
}
input[type=checkbox]:disabled {
    opacity: 0.3;
}
.checkradio label {
    vertical-align: top;
    padding: 2px 0 0 2px;
}
.checkradio label span {
    vertical-align: top;
}

I'd setup a fiddle but didn't know how to make it mobile friendly.  Please help.

[luv2hike]

Okay, I did attempt a Fiddle and it "sort of" works on my desktop, though I'm missing a lot of inherited styles from the main app.  The Fiddle also has completed JS/CSS and corrects the HTML.  You may find it here:

http://jsfiddle.net/bShgk/6/

[luv2hike]

Updated fiddle:  bindings are not working.

http://jsfiddle.net/bShgk/18/

[Brad Grant]

Here is a new fiddle that is getting closer to working but I still cannot get the disable/css bindings to work for graying out or hiding entries.

http://jsfiddle.net/LkqTU/14560/

--
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/_I23w0dM-Uo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[luv2hike]

Latest jsfiddle with decent results; it seems to be functional now although it seems the computed for boxGrayed is called way too many times.  I wonder if the extra alerts I'm getting here are indicative of the "tap bounce" check/uncheck issue we are having on some Androids?

http://jsfiddle.net/LkqTU/14562/

[luv2hike]

One last fiddle that incorporates about all the functionality now of the real app that is causing fits.

http://jsfiddle.net/luv2hike/m23UT/1/

Would anyone have any pointers on why this would cause some Androids immediately uncheck the box when the user checks it?  It is right for the alert to be called 6 times for each click?

[Michael Best]

I never makes sense to call a function in a binding that returns a computed observable because bindings are already run within a computed observable. Here I've changed your code so the boxGrayed function just returns that value: http://jsfiddle.net/m23UT/3/. The reason you see four calls (I changed the code to use console.log instead of alert) is because you're calling the function from four bindings.

-- Michael

[Brad Grant]

Michael,

That is awesome.  I am confused however.  I had tried that first as I didn't even know about returning a computed from a function until I saw another thread reference it and it fixed my initial issue.  When I tried just returning a value, though, it did not work.  In fact, it stopped all bindings from functioning after the initial load.

The one thing I see different is your code just uses a plain function for boxGrayed while I was making it a dependentObservable or a computed function.  Why does yours work without needing to be observable or computed?  How does Knockout know to call it when the list is updated?

By the way, I've forked yours here:
http://jsfiddle.net/8hXR5/

with both IDs at zero to show it does move the counter correctly to keep the list ordered in the sequence the boxes are checked.  This was the goal.

[Michael Best]

Knockout wraps each binding in a computed observable that calls the binding handler's update function. Thus any observables you access in the binding become dependencies of the binding and cause it to update when changed.

When you had the boxGrayed function return a computed observable, you got more updates because a new computed observable was created and returned whenever the binding was updated.

-- Michael