使用基因敲除.js基于选择下拉菜单切换按钮状态

Question

我有一个小的表格要添加逻辑，现在我一直在尝试根据下拉菜单的选定值在启用和禁用之间更改“添加”按钮的状态。

我的DOM标记如下：

<div>
    <select data-bind="options: myOptions, optionsText: 'UserName', optionsValue: 'UserId', optionsCaption: 'Select...'"></select>
    <input type="text" class="optional" />
    <input class="addButton" type="submit" name="addButton" value="ADD" data-bind="enable: addButtonState" />
</div>

我当前的Knockout.js代码如下：

self.addButtonState = ko.observable(false);
self.toggleAddButtonState = function () {
  // Some logic to go here
}

如您所见，下拉菜单的默认值为select... 当提供此默认值时，我希望addButton处于禁用状态。 但是，选择任何其他选项后，即可启用它。 可选的文本字段应该无关紧要。

我该怎么做？

Answer 1

好吧，这可以通过替代方式完成，而无需额外的逻辑

在这里工作小提琴

查看型号：

self.selectedVal=ko.observable();
self.toggleAddButtonState = function () {
  // do what ever you want 
}

查看：

<div>
    <select data-bind="options: myOptions, optionsText: 'UserName', optionsValue: 'UserId', optionsCaption: 'Select...',value: selectedVal"></select>
    <input type="text" class="optional" />
    <input class="addButton" type="submit" name="addButton" value="ADD" data-bind="enable: selectedVal" />
</div>

这里的技巧很简单。 最初， selectedVal是未定义的，您可以使用它并绑定到enable 。

这里可以避免额外的编码，例如，对于下拉列表的更改，我们需要编写计算或订阅等

Answer 2

您可以使用计算的可观察值： http : //knockoutjs.com/documentation/computedObservables.html

//this is for the selected user
self.user = ko.observable();

self.addButtonState = ko.computed(function() {
    return self.user() != undefined;
});

您还需要将值绑定添加到选择中，以将所选值绑定到新添加的可观察到的用户：

<select data-bind="options: myOptions, optionsText: 'UserName', optionsValue: 'UserId', optionsCaption: 'Select...', value: user"></select>

http://jsfiddle.net/74dh736s/