Question

When binding a checkbox to the checked binding and using jQuery mobile the observable does not get updated when the enhanced checkbox is checked.

see here

I have looked at the code for both libraries and it seems that knockoutjs is bound to the click event, yet jQuery mobile only updates the checked value which does not fire this event, i have fudged around with hacks to try to get this working with no joy..

Does anyone have a workaround for this ?

Answer 1

There might be a better way to do this, but have a look at this:

http://jsfiddle.net/vQRWQ/

I’ve added a new bindingHandler:

ko.bindingHandlers.checkbox = {
    update: function(element, valueAccessor) {

        var value = valueAccessor();

        var valueUnwrapped = ko.utils.unwrapObservable(value); 

        $(element).attr("checked", valueUnwrapped).checkboxradio("refresh");
    }
};

And used the “event” binding:

data-bind="event: {change: function(){ checked(!checked()); } }, checkbox: checked"