输入字段不为空时如何启用按钮 [英] How to enable button when input field is not empty

问题描述

我有一个要求，即必须有一个表格，如果所有字段都被填写，则仅提交"按钮将被启用，否则提交"按钮将处于禁用状态.

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.

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

This fiddle works fine for 1 input field:

<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.

推荐答案

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属性间依赖关系的关键是敲除的计算得到的可观察值.

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

这篇关于输入字段不为空时如何启用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！