如何在输入字段为空时启用按钮

Question

我有一个要求,其中有一个表单,如果所有字段都填写,那么只有提交按钮将被启用,否则提交按钮将处于禁用状态.

这个小提琴适用于1个输入字段:

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

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

但是,我不知道如何为多个输入字段执行此操作,如在此小提琴中.如果有大约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.解决视图模型属性间依赖关系的关键是Knockout的计算可观察量.