Th4t Guy Th4t Guy - 2 months ago 29
jQuery Question

Knockout enable binding not working

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

Enable binding does not work with anything you want.

This is useful with form elements like input, select, and textarea It also works with buttons. Like in my example http://jsfiddle.net/5CbnH/1/

But it does not work with your link. You are using twitter bootstrap and they enable/disable their "buttons" with css classes. So you have to use css binding like this:

data-bind="css: { yourClass: enabled }"

Check what class is responsible in bootstrap for showing your "button" and modify your code accordingly with css binding.