title: How to enable or disable a button using knockout.js
body: <p>I want to disable a button using knockout.js when the user clicks the button and the server is processing some data. I'm looking at the <a href="http://knockoutjs.com/documentation/enable-binding.html">example</a> in the knockout tutorials but appear to be missing something.</p>
  
  <p>I have the <code>enable:</code> part in the <code>data-bind</code>:</p>
  
  <pre><code>&lt;body&gt;
      &lt;form id="form1" runat="server" &gt;
      &lt;h1 style="text-align: center"&gt;Select the item(s) you want.&lt;/h1&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;div id="buttons" style="text-align: center"&gt;
              &lt;button data-inline="true" data-bind="click: submit, enable: canSubmit" &gt;Submit&lt;/button&gt;
              &lt;button data-inline="true" data-bind="click: cancel"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I have set an observable in the view model to false. However, the button is
  enabled on the page when the view is initialized. So I think it is a data binding issue.</p>
  
  <pre><code>function ViewModel() {
      var self = this;
      self.selectedItems = ko.observableArray([]);
      // we should start off not being able to click the submit button
      self.canSubmit = ko.observable(false);
  };
  </code></pre>
  
  <p>I want to have the button enabled until the user clicks the submit button, then disable it until the server has finished doing it's thing.</p>
  
  <pre><code>self.submit = function () {
          // disable submit button
          self.canSubmit = false;
          // do stuff
          self.canSubmit = true;
  };
  </code></pre>
  
  <p>How do you bind the <code>enable</code> observable value to the button?</p>