Can't disable jqueryui button with knockoutjs in chrome

Question

I have the following very simple code:

html

<a data-bind="enable: selected()" href="http://www.google.com">Click Me</a>

javascript

function pageViewModel() {
    var self = this;
    self.selected = ko.observable();
}
$(document).ready(function() {
    $("a").button();
    ko.applyBindings(new pageViewModel());
});

This works in IE9 but not in Chrome (i.e. the anchor tag is made to look like a disabled button in IE9 but in Chrome the tag looks like/IS an enabled button). I've also tried disabling the buttons by directly manipulating the css with the following binding:

<a data-bind="css: {ui-button-disabled: !selected(), ui-state-disabled: !selected()}">Click Me</a>

But apparently knockoutjs doesn't like the fact that the classes I'm using have the - in them.

So now I'm stuck. Does anyone have any ideas on how I can get this to work for both browsers using jqueryui and knockoutjs?

Thanks.

Answer 1

You can enclose the class name in quotes:

<a data-bind="css: {'ui-button-disabled': !selected(), 'ui-state-disabled': !selected()}">Click Me</a>

A better approach, though, would be to use a custom binding that sets the button's disabled option:

ko.bindingHandlers.button = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).button();
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            disabled = ko.utils.unwrapObservable(value.disabled);

        $(element).button("option", "disabled", disabled);
    }
};

You can then bind it like:

<a data-bind="button: { disabled: !selected() }">Click Me</a>