title: Need some guide line to achieve a task using knockout js
body: <p>i am new in knockout js and apologized to ask for help because the output i like to have for which i do not have sufficient knowledge in  knockout js.</p>
  
  <p>suppose i have three drop down and one button, suppose country drop down, state drop down and city drop down and one button. all drop downs are populated with data. now i want by default the button will be disabled but when user select any data from any drop down then button will be enable. so logic and code is not coming to my head. i need guide line to develop such program with knockout binding.</p>
  
  <p>so please some one share the knowledge.</p>
  
  <h2>one guy told me to complete this task this way.</h2>
  
  <p>You've got 3x observables - state, county and city.  They are bound to those <code>dropdowns</code>.
  You'll have another observable called "<code>buttonEnabled</code>" of the form
  <code>var buttonEnabled = ko.observable(false).</code>  Bind this using the enabled binding to your button.</p>
  
  <p>Create a computed which is there purely for its side-effects.  The code will be</p>
  
  <pre><code>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);
  }
  });
  </code></pre>
  
  <p>There are other ways, like using <code>.subscribe()</code> on the observables directly.</p>
  
  <p>but still do not understand how to do this. any help would be appreciated. thanks</p>
  
  <h2>EDIT</h2>
  
  <p>i just add one textbox along with drop down and try to do the same things like if some one fill the textbox then button will be enable and again if some one remove text from textbox then button will disabled. </p>
  
  <p>when textbox is empty and when put some text then button is getting enabled but when remove the text from textbox then button suppose to be disabled which is not happening. i guess there is small thing is missing in code. so please tell me what to add. here is my jsfiddle link <a href="http://jsfiddle.net/tridip/r95kc6u5/1/" rel="nofollow">http://jsfiddle.net/tridip/r95kc6u5/1/</a></p>
  
  <pre><code>&lt;input data-bind="value: UserName, valueUpdate: 'afterkeydown'" /&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;select data-bind="options: country, optionsCaption:'--Select Country--', value: selected_country"&gt;&lt;/select&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;select data-bind="options: state, optionsCaption:'--Select State--', value: selected_state"&gt;&lt;/select&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;select data-bind="options: city, optionsCaption:'--Select City--', value: selected_city"&gt;&lt;/select&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;button data-bind="enable: buttonEnabled"&gt;Submit&lt;/button&gt;
  
  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);
  </code></pre>