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

I have a requirement in which there is a form and if all the fields are filled then only submit button will be enabled else the submit button will be in disabled state.

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

This fiddle works fine for 1 input field:

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

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

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

However, I don't know how to do this for multiple input fields like as in this fiddle. If there are some 10 input fields then how to enable the submit button if and only if all the fields are filled up.

但是,我不知道如何为多个输入字段执行此操作,就像在这个小提琴中一样。如果有大约10个输入字段,那么当且仅当所有字段都已填满时,如何启用提交按钮。

2 个解决方案

#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);

See updated JSFiddle. The key to solving viewmodel inter-property dependencies is Knockout's computed observables.

请参阅更新的JSFiddle。解决viewmodel属性间依赖关系的关键是Knockout的计算可观察量。

#2

You could use JQuery to solve this, by doing the following:

您可以通过执行以下操作使用JQuery来解决此问题:

HTML Markup:

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

JQuery Script:

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

That should make your life a whole lot easier. Let me know if not.

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

#1