title: Toggle disable attribute using javascript
body: <p>I have a form that has two radio buttons and a textarea. The textarea is disabled initially. When the user selects the 'Custom Message' radio button, the disabled property is removed and the textarea becomes editable.</p>
  
  <p>Now if the user selects the 'Dummy Message' radio button, the textarea should become disabled again.</p>
  
  <p>So far I have this code,</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>document.getElementById('customMessageRadioButton').addEventListener('change', function() {
    if (document.getElementById('customMessageRadioButton').checked) {
      document.getElementById('customMessageTextArea').removeAttribute("disabled");
      document.getElementById('customMessageTextArea').focus();
    }
  
    if (!document.getElementById('customMessageRadioButton').checked) {
      document.getElementById('customMessageTextArea').setAttribute("disabled", "true");
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input name="group1" id="dummy" type="radio" /&gt;Dummy Message
  &lt;input name="group1" id="customMessageRadioButton" type="radio" /&gt;Custom Message
  &lt;textarea disabled id="customMessageTextArea"&gt;&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The issue I am facing here is in this case - when I select the 'Custom Message' radio button first and then I go back and choose the 'Dummy Message' radio button, the textarea is not getting disabled.</p>
  
  <p>Here is my <a href="http://jsbin.com/jasoxekebo/edit?html,console,output" rel="nofollow noreferrer">JS Bin</a></p>
  
  <p>P.S. I cannot use jQuery. Have to use only vanilla Javascript.</p>