title: Knockout Input ReadOnly State
body: <p>I am trying to add a simple functionality in my program and Im having a little trouble figuring out how to do something I wanted. <br /> <br />
  Here's what I got: <br /> <br />
  My input textbox, with a link beside it to disable/enable readonly property on that input textbox.</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="text" data-bind="attr: { 'readonly': getreadonlyState() }" value="420" /&gt;
      &lt;a href="javascript:void(0);" data-bind="click: readonly"&gt;Edit&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my knockout script for it:</p>
  
  <pre><code>var ViewModel = function() {
      var self = this;
      self.getreadonlyState = ko.observable('readonly');
      self.readonly = function() {
          if (self.getreadonlyState()) {
              self.getreadonlyState(undefined);
          }
          else self.getreadonlyState('readonly');
      }
  }
  
  ko.applyBindings(new ViewModel());
  </code></pre>
  
  <p>This works great, but what I wanted is when I click the edit link, it will change the text of the link to something like: "Stop Editing" so when I click "Stop Editing" the readonly property is enabled again. <br />
  Here's a <a href="http://jsfiddle.net/eeTjS/81/" rel="nofollow">fiddle</a> of what Im working on. <br />
  Any help will be greatly appreciated, thank you!</p>