Can't disable jqueryui button with knockoutjs in chrome

jquery-ui, knockout.js

Solution

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>

Problem

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.

Original source