javascript - 如何在 Knockout.js 中正确清除复选框单击上的另一个字段？

Question

我有一个复选框列表，其中一个是“其他”，我想要的是如果选择了“其他”，则会启用一个文本框。如果未选中“其他”，则必须禁用文本框并清除其内容。

现在的问题是，当我点击“其他”复选框时，直到我触发另一个绑定(bind)事件时，复选标记才会显示或消失。我必须通过将点击事件处理程序添加到“其他”复选框来进行 knockout 。

fiddle here

HTML

<input type='checkbox' value='apple' data-bind='checked: selectedFoods' />apple
<br>
<input type='checkbox' value='banana' data-bind='checked: selectedFoods' />banana
<br>
<input type='checkbox' value='other' data-bind='checked: selectedFoods, event: {click: otherClicked}' />other
<input type='text' data-bind="text: otherFoods, attr:{disabled: selectedFoods.indexOf('other') < 0}" />

JS

$(document).ready(function () {
    var BaseVM = function () {
        var that = {};
        return that;
    };

    var TestVM = function () {
        var that = BaseVM();

        that.selectedFoods = ko.observableArray(['apple', 'banana']);
        that.otherFoods = ko.observable(null);

        that.otherClicked = function () {
            if (that.selectedFoods.indexOf('other') < 0) {
                that.otherFoods = '';
            }
        };

        return that;
    };

    var vm = TestVM();
    ko.applyBindings(vm);
});

Answer 1

这一行

that.otherFoods = '';

错了。您需要将值分配为可观察值，因为它就是这样:

that.otherFoods('');

此外，您需要在检查值时评估数组:

that.selectedFoods.indexOf('other') < 0

应该是

that.selectedFoods().indexOf('other') < 0

编辑:您的点击处理程序设置错误，请参阅更新后的 fiddle :

http://jsfiddle.net/2qdu9tuo/9/

您需要在点击处理程序中返回 true 以使复选框仍然像复选框一样运行。此外，您在文本框上使用文本绑定(bind)而不是值绑定(bind)。