使用knockoutjs禁用绑定

Question

我试图让一个输入框在选中复选框时被禁用。我正在尝试使用 Knockoutjs 来完成此操作，但它似乎不起作用。

这是我的 html:

<input id="input1" type="text" placeholder="Something Here" 
data-bind="disable: makeInvalid"/>
<input type="checkbox" id="chk1" data-bind="checked: makeInvalid"/>
<label>Make Textarea Invalid</label>

这是我的 js:

var viewModel = {
        makeInvalid : ko.observable(false),        
};

ko.applyBindings(viewModel, document.getElementById("chk1"));

我的 fiddle 在这里：

https://jsfiddle.net/devEngine/3ag0881z/2/

我已经尝试遵循 knockout 关于禁用绑定的说明，他们说这与启用绑定完全相同，只是相反：

http://knockoutjs.com/documentation/enable-binding.html

谁能告诉我我做错了什么？

如有任何帮助，我们将不胜感激。

Answer 1

这个修复起来超级简单。您的应用绑定仅命中 ID 为 chk1 的元素。 observable 的值只会被绑定在那个范围内。只需删除 ko.applyBindings 的第二个参数，它就可以正常工作。

var viewModel = {
        makeInvalid : ko.observable(false),        
};
    
    ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<input id="input1" type="text" placeholder="Something Here" 
data-bind="disable: makeInvalid"/>
<input type="checkbox" id="chk1" data-bind="checked: makeInvalid"/>
<label>Make Textarea Invalid</label>

Answer 2

您的 jsFiddle 中缺少敲除。

这是不正确的 ko.applyBindings(viewModel, document.getElementById("chk1"));。您需要将绑定应用于输入以及复选框。 ko.applyBindings(viewModel);

查看正在运行的 jsFiddle： https://jsfiddle.net/3ag0881z/4/

Answer 3

<input type="checkbox" data-bind="attr: { disabled: isDisabled}, checked: isActive" />

.

var viewModel = {
        isDisabled: ko.observable(false),
        isActive : ko.observable(false)
};

ko.applyBindings(viewModel);

这适用于 enable/disable 复选框，也适用于 checked/unchecked

使用knockoutjs禁用绑定

Use of knockoutjs disable binding

html

javascript

jsfiddle

knockout.js