Question

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

我想实现这一点，使用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>

SCRIPT：

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

这是一个小提琴：JSFiddle

有人可以帮助我朝正确的方向发展吗？我有点卡住......提前谢谢。

Answer 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变量。

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

1 个答案: