输入字段不为空时如何启用按钮答案

【问题标题】：How to enable button when input field is not empty输入字段不为空时如何启用按钮
【发布时间】：2014-05-31 07:12:39
【问题描述】：

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

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 个输入字段，那么当且仅当所有字段都填满时，如何启用提交按钮。

【问题讨论】：

验证：github.com/Knockout-Contrib/Knockout-Validation
@Anders 感谢提供有用的链接，但我已经在使用 parsley.js 进行表单验证
@KyleMit 感谢您让我的帖子看起来更好
好的，还没用过。然后将按钮连接到其有效状态
由于您已经在使用 parsley.js（您应该在原始问题中提到这一点），您可能需要查看将两者集成的 knockout-parsley 项目：github.com/gdandar/Knockout-Parsley

标签： javascript jquery knockout.js

【解决方案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。

【讨论】：

你的小提琴和我的小提琴在问题中的工作方式相同jsfiddle.net/M6BzW/577。当您填写一个文本字段时，该值会反映在所有字段中
对不起，实际上我正在查看您的答案并理解代码。所以晚了接受您的答案。再次抱歉。+1 以获得最佳答案
@JqueryLearner 我做到了。
我尝试使用 2 个字段，例如 this，但是当我在我的项目中实施时，它又无法正常工作
@JqueryLearner 就像我说的。将您的问题简化为展示问题的基础知识，人们可能想看看它。但很可能你会一直解决它，这比让人们用勺子喂你解决方案更有价值。

【解决方案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);
}

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

【讨论】：

问题是关于 Knockout.js
他将 jquery 作为标签之一，所以我的答案基于此。
@StanCromlish 感谢您的回答，但我更喜欢先用 knockout.js 和 parsley.js，而且我不是反对者
我会中和那次反对票。因为我自己差点给了一个 Jquery 解决方案。现在人们对投票的速度太快了！
@StanCromlish 是我的错，不是你的错。那么为什么你应该为我的错而受到惩罚。+1 也适用于你的 jquery 解决方案