Question

我有一个复选框列表，其中一个是＆＃34;其他＆＃34;而我想要的是，如果＆＃34;其他＆＃34;选中，然后启用文本框。如果＆＃34;其他＆＃34;如果未选中，则必须禁用文本框，并且必须清除其内容。

现在，问题是当我点击＆＃34;其他＆＃34;复选框，复选标记不会显示或消失直到我触发另一个绑定事件。我必须通过将Click事件处理程序添加到＆＃34;其他＆＃34;复选框。

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

编辑：您的点击处理程序设置错误，请参阅此更新的小提琴：

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

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

Answer 2

首先，您需要return true处理程序中的click，否则原生事件不会传播，复选框状态也不会更改。

此外，重置otherFoods observable时，需要调用observable，而不是覆盖它：

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

    return true;
};

另一个问题是，您使用text绑定处理程序代替otherFoods处理程序而不是value处理程序：

<input type='text' data-bind="value: otherFoods, attr:{disabled: selectedFoods.indexOf('other') < 0}" />

请参阅Fiddle

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

2 个答案: