title: Enable and Disable Input Field On Click (not toggle)
body: <p>Q: How do i make a field disable and then another one enable when clicking on an anchor tag.</p>
  
  <p>Progress so far: Disabling the field works, but Re-enabling the field is just another click away unfortunately. Also, the second field doesn't get enabled on the click.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// When clicking "Lock your username" that input field should be disabled, 
  //and the Comment section should be enabled
  $("#lock").click(function() {
    $("#sender").attr('disabled', !$("#sender").attr('disabled'));
    $("#message").attr('disabled', !$("#message").attr('enabled'));
  
  });
  
  //problems right now:
  // clicking twice re-enables the field.
  // from what i've understood, disabled fields cannot be targeted with event handlers?
  //
  //</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="formInput"&gt;
    &lt;input type="text" id="sender" placeholder="Your Name" /&gt;
  
    &lt;a id="lock" style="border:1px solid rgba(000,200,000,0.5);background:#ccc;cursor:pointer;padding:2px;width:150px"&gt;Lock your username&lt;/a&gt;
  
    &lt;div id="messages" style="height:100px; border:1px solid #000;width:200px;"&gt;
      &amp;nbsp; Messages will go here
    &lt;/div&gt;
    &lt;input type="text" id="message" placeholder="write your comment here" autocomplete="off" disabled /&gt;
    &lt;input type="submit" id="send" style="border:1px solid rgba(000,200,000,0.5);background:#ccc;cursor:pointer;padding:2px;width:150px" value="send message" /&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>