Knockout enable binding not working

Question

I can't get the enable binding to work in Knockout JS. With the enabled property set to false, the button is not disabled and I can still click it.

see fiddle

<a  class="btn btn-xl btn-primary" 
    href="#" 
    role="button" 
    data-bind="enable: enabled, click: clicked, visible: isVisible">
        <i class="icon-only icon-ok bigger-130"></i>
</a>      

var ViewModel = function(){
    var self = this;

    self.enabled = ko.observable(false);
    self.isVisible = ko.observable(true);
    self.clicked = function(){
        alert('You clicked the button');
    };
};

$(function(){
    var model = new ViewModel();
    ko.applyBindings(model);
})          

Answer 1

For people who might find this in a search:

I had a problem getting the enable binding to work as well. My problem was trying to use a complex expression without referencing the observables like functions:

<input type="button" data-bind="enable:AreAllStepsVerified && IsFormEnabled, click:SubmitViewModel"/>

Should have been:

<input type="button" data-bind="enable:AreAllStepsVerified() && IsFormEnabled(), click:SubmitViewModel"/>

See: https://stackoverflow.com/a/15307588/4230970