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

这可以通过替代方式完成，没有额外的逻辑

工作小提琴Here

查看型号：

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以将所选值绑定到新添加的用户可观察对象：

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

http://jsfiddle.net/74dh736s/

使用knockout.js根据选择下拉列表切换按钮状态

2 个答案: