使用 Knockout.js 在表单输入上切换按钮状态

Posted 2023-03-07

【中文标题】使用 Knockout.js 在表单输入上切换按钮状态

【英文标题】：Toggle button state on form input using Knockout.js

【发布时间】：2014-07-29 09:24:50

【问题描述】：

我有一个包含一些基本输入字段的表单。 默认情况下，应该禁用提交按钮，因为当没有字段包含值时，不应该（也不能）提交表单。

我想实现这一点，使用 Knockout.js，当输入字段包含值时，提交按钮会自动启用。

这是我目前使用的代码：

HTML：

<table class="table table-striped">
    <tr>
        <td>Name</td>
        <td>
            <input class="form-control" data-bind="value: pname" placeholder="John Doe" type="text" />
        </td>
    </tr>
    <tr>
        <td>Date of birth</td>
        <td>
            <input class="form-control" type="date" />
        </td>
    </tr>
    <tr>
        <td>Gender</td>
        <td>
            <select class="form-control">
                <option disabled hidden="" selected value="">Select a gender</option>
                <option value="female">Female</option>
                <option value="male">Male</option>
                <option value="other">Other</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>City</td>
        <td>
            <input class="form-control" placeholder="f.e. Brussels" type="text" />
        </td>
    </tr>
</table>
<div class="text-center">
    <button class="btn btn-primary" data-bind="enable: pname.length &gt; 0" type="button">Filter by patient</button>
</div>

脚本：

$(document).ready(function () 
  ko.applyBindings(
    archived: ko.observable(false),
    pname: ko.observable(),
    pgender: ko.observable(),
    pcity: ko.observable()
  );
);

这是一个小提琴：JSFiddle

有人可以帮助我朝着正确的方向前进吗？我有点卡住了...在此先感谢。

【参考方案1】：

创建一个计算变量，包含所有字段检查（您的验证，我只检查空字段）：

self.checkSubmit = ko.computed(function() 
    return self.pname() != '' && self.pgender() != '' && self.pcity() != '';
); 

或者创建可观察的错误数组，并检查按钮是否启用；

<button class="btn btn-primary" data-bind="enable: $root.checkSubmit" type="button">Filter by patient</button>

在 jsfiddle 上查看。必填字段由您自己插入。那里：http://jsfiddle.net/T3SKz/1/ 仅检查空 pname 变量。

【讨论】：

完美运行。我会修改它以满足我的需要。谢谢！