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);
})

score 25 · Accepted Answer · edited Mar 28 '14 at 11:25

25

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.

edited Mar 28 '14 at 11:25

Joel Cochran

7,139
2
30
43

answered Mar 27 '14 at 23:15

Salvador Dali

214,103
147
703
753

Thanks. We came to the same conclusion but you got there faster. – Th4t Guy Mar 27 '14 at 23:26
This is old, but the fiddle needs a closing quote on the button's data-binding – Jake Gaston Jul 13 '17 at 15:30

Simon_Weaver · Answer 2 · 2022-04-14T19:13:41.377

25

Right:

✅ enable
✅ disable

Wrong:

❌ enabled
❌ disabled

Make sure you use disable instead of disabled and enable instead of enabled.

<input type="text" data-bind="value: foo, enable: isEditing"/>   YES!!
<input type="text" data-bind="value: foo, enabled: isEditing"/>   NO!

Easy mistake to make :-)

edited Apr 14 '22 at 19:13

answered Feb 21 '15 at 00:54

Simon_Weaver

140,023
84
646
689

1

I forget this at least once every 2 months. – Madbreaks Jan 03 '20 at 18:57

score 11 · Answer 3 · edited May 23 '17 at 11:54

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

score 6 · Answer 4 · answered Mar 27 '14 at 23:20

What Salvador said in his answer.

You must understand that the enabled and disabled binding in knockout work by putting a disabled attribute on the target DOM element. Now if you look at the HTML documentation you'd notice that not all HTML element support this attribute.

Actually only form elements (e.g. <button>) do. <a> does not.

score 0 · Answer 5 · answered Mar 27 '14 at 23:18

0

I got it to work by changing the anchor tag to a button, not really sure why this makes it work, but it works nonetheless.

Updated fiddle.

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

answered Mar 27 '14 at 23:18

Th4t Guy

1,442
3
16
28

2

This works because `a` does not have disable enable options. You either have to use bootstrap's css (as I suggested) or to make it a real button (like you changed here). – Salvador Dali Mar 27 '14 at 23:45

Knockout enable binding not working

5 Answers5

Right:

Wrong: