Rather than overriding the base checked handler, just create your own custom binding to update the UI.
Here’s an example of a model and a custom binding to handle updating the UI:
var Model = function () {
this.checked = ko.observable(false);
};
ko.bindingHandlers.customCheckbox = {
init: function (element) {
// Create the custom checkbox here
$(element).customInput();
},
update: function (element) {
// Update the checkbox UI after the value in the model changes
$(element).trigger('updateState');
}
};
I’ll bind the model to the following HTML:
<input type="checkbox" name="genre" id="check-1" value="action" data-bind="checked: checked, customCheckbox: checked" />
And really that’s all I’ll need to do.
Here’s an example: http://jsfiddle.net/badsyntax/4Cy3y/
[edit] – i think i rushed through reading your question and didn’t get the crux of what you were asking. I’ll leave my answer here in any case.