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。

Answer 2

您可以使用JQuery解决此问题，方法如下：

HTML标记：

<button id="my" type="button" disabled="true">My Button</button>
<input id="hi" type="text" name="hi" />

JQuery脚本：

if (allFields == valid) {
    $('#my').prop('disabled', false);
}

这应该会让你的生活变得更轻松。如果没有，请告诉我。

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

2 个答案: