javascript - 输入字段不为空时如何启用按钮

Question

我有一个要求，其中有一个表单，如果所有字段都已填写，则只会启用提交按钮，否则提交按钮将处于禁用状态。

This fiddle适用于 1 个输入字段:

<button data-bind="enable: my">My Button</button>
<input type="text" name="hi" data-bind="value:my" />

ko.applyBindings({ my: ko.observable() });

但是，我不知道如何为多个 输入字段执行此操作，例如 this fiddle .如果有大约 10 个输入字段，那么当且仅当所有字段都已填写时如何启用提交按钮。

Answer 1

HTML

<button data-bind="enable: isFormValid">My Button</button>
<input type="text" data-bind="value: text1, valueUpdate: 'keyup'" />
<input type="text" data-bind="value: text2, valueUpdate: 'keyup'" />
<input type="text" data-bind="value: text3, valueUpdate: 'keyup'" />
<input type="text" data-bind="value: text4, valueUpdate: 'keyup'" />

JS:

var vm = {
    text1: ko.observable(""),
    text2: ko.observable(""),
    text3: ko.observable(""),
    text4: ko.observable("")
}

vm.isFormValid = ko.computed(function() {
    return this.text1() && this.text2() && this.text3() && this.text4();
}, vm);

ko.applyBindings(vm);

查看更新 JSFiddle .解决viewmodel间属性依赖的关键是Knockout's computed observables .