Question

我是淘汰赛中的新手并且道歉请求帮助，因为我喜欢的输出我对淘汰赛js没有足够的知识。

假设我有三个下拉按钮和一个按钮，假设国家下拉，状态下拉和城市下拉和一个按钮。所有下降都填充了数据。现在我想要默认按钮将被禁用，但当用户从任何下拉列表中选择任何数据时，按钮将被启用。所以逻辑和代码不是我的想法。我需要指导线来开发具有敲除绑定的程序。

所以请一些人分享知识。

一个人告诉我以这种方式完成这项任务。

你有3倍的可观测量 - 州，县和城市。它们与dropdowns绑定。你还有另一个名为＆＃34; buttonEnabled＆＃34;形式 var buttonEnabled = ko.observable(false).使用已启用的绑定绑定到您的按钮。

创建一个仅用于副作用的计算机。代码将是

ko.computed( function() {

//just so this computed subscribes to those observables
state();
county();
city();

//Prevent this from running when the computed is initialising.
//See http://knockoutjs.com/documentation/computed-reference.html
if (!ko.computedContext.isInitial()) {
  buttonEnabled(true);
}
});

还有其他方法，例如直接在observable上使用.subscribe()。

但仍然不明白该怎么做。任何帮助，将不胜感激。感谢

修改

我只需添加一个文本框以及下拉并尝试执行相同的操作，例如，如果有人填充文本框，则按钮将启用，如果有人从文本框中删除文本，则按钮将被禁用。

当文本框为空时，当放置一些文本时，按钮就会启用，但是当从文本框中删除文本时，按钮会被假定为禁用，这不会发生。我想在代码中缺少一些小东西。所以请告诉我要添加什么。这是我的jsfiddle链接http://jsfiddle.net/tridip/r95kc6u5/1/

<input data-bind="value: UserName, valueUpdate: 'afterkeydown'" />
<br /><br />
<select data-bind="options: country, optionsCaption:'--Select Country--', value: selected_country"></select>
<br /><br />
<select data-bind="options: state, optionsCaption:'--Select State--', value: selected_state"></select>
<br /><br />
<select data-bind="options: city, optionsCaption:'--Select City--', value: selected_city"></select>
<br /><br />
<button data-bind="enable: buttonEnabled">Submit</button>

function ViewModel() {
    var self = this;
    self.UserName = ko.observable(null);
    self.state = ko.observableArray(['State 1', 'State 2', 'State 3']);
    self.country = ko.observableArray(['Country 1', 'Country 2', 'Country 3']);
    self.city = ko.observableArray(['City 1', 'City 2', 'City 3']);

    self.selected_state = ko.observable(null);
    self.selected_country = ko.observable(null);
    self.selected_city = ko.observable(null);

    self.buttonEnabled = ko.computed(function () {
        var state = false;
        if (self.selected_state() != null || self.selected_country() != null || self.selected_city() != null || self.UserName()!=null) {
            state = true;
        }
        return state;
    });
}

var vm = new ViewModel();
ko.applyBindings(vm);

Answer 1

以下代码可让您从3个下拉列表中选择一个值，然后启用该按钮。

HTML

<select data-bind="options: state, optionsCaption:'States', value: selected_state"></select>
<br />
<select data-bind="options: country, optionsCaption:'Countries', value: selected_country"></select>
<br />
<select data-bind="options: city, optionsCaption:'Cities', value: selected_city"></select>
<br />
<input type="text" data-bind="value: text_value, valueUpdate: 'afterkeydown'" /> // newly added
<br />
<button data-bind="enable: buttonEnabled">Submit</button>

KnockoutJS

function ViewModel() {
    var self = this;

    self.state = ko.observableArray(['State 1', 'State 2', 'State 3']);
    self.country = ko.observableArray(['Country 1', 'Country 2', 'Country 3']);
    self.city = ko.observableArray(['City 1', 'City 2', 'City 3']);

    self.selected_state = ko.observable(null);
    self.selected_country = ko.observable(null);
    self.selected_city = ko.observable(null);
    self.text_value = ko.observable(''); // newly added

    self.buttonEnabled = ko.computed(function () {
        var state = false;
        // new value added to check (self.text_value)
        if (self.selected_state() != null || self.selected_country() != null || self.selected_city() != null || self.text_value() != '') {
            state = true;
        }
        return state;
    });
}

var vm = new ViewModel();
ko.applyBindings(vm);

由于

需要一些指导线来实现使用knockout js的任务

一个人告诉我以这种方式完成这项任务。

修改

1 个答案: