Question

我无法在Knockout JS中使用enable绑定。将enabled属性设置为false后，该按钮不会被禁用，我仍然可以单击它。

请参阅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

Enable绑定不适用于您想要的任何内容。

这对输入，选择和textarea等表单元素很有用它也适用于按钮。就像在我的例子http://jsfiddle.net/5CbnH/1/
中一样

但它不适用于您的链接。你正在使用twitter bootstrap，他们使用css类启用/禁用他们的“按钮”。所以你必须像这样使用css binding：

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

检查引导程序中哪个类负责显示“按钮”并使用css绑定相应地修改代码。

Answer 2

右：

启用
禁用

错误：

<强>启用禁用

请务必使用disable代替disabled和enable代替enabled。

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

容易犯错： - ）

Answer 3

对于可能在搜索中找到此内容的人：

我在启用启用绑定时遇到了问题。我的问题是尝试使用复杂的表达式而不引用像函数这样的observable：

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

应该是：

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

请参阅：https://stackoverflow.com/a/15307588/4230970

Answer 4

萨尔瓦多在回答中说道。

您必须通过在目标DOM元素上放置enabled属性来理解淘汰赛中的disabled和disabled绑定。现在，如果您查看HTML文档，您会注意到并非所有HTML元素都支持此属性。

实际上只有表单元素（例如<button>）可以。 <a>没有。

Answer 5

我通过将锚标记更改为按钮来实现它，并不确定为什么这会使它工作，但它仍然有效。

更新了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>

Knockout使绑定无法正常工作

5 个答案:

右：

错误：