title: How to stop form input with `disabled` attribute from sending?
body: <p>Form inputs with the <code>disabled</code> attribute are not suppose to send by the client.</p>
  
  <p>But for some reason both <code>#id_of_first_div</code> and <code>#id_of_second_div</code> are sending despite toggling of the radio button between <code>#challenge_category_one-shot</code> and <code>#challenge_category_ongoing</code>.</p>
  
  <h2>_form</h2>
  
  <pre><code>&lt;%= form_for(@challenge)  do |f| %&gt;
    &lt;%= f.text_field :action %&gt;
    &lt;% Challenge::CATEGORY.each do |c| %&gt;
      &lt;%= label(c, c) %&gt;:
      &lt;%= f.radio_button(:category, c, :class =&gt; "date-format-switcher", checked: (c=='One-Shot')) %&gt;
    &lt;% end %&gt;
  
    &lt;div id='id_of_first_div'&gt;
      &lt;%= f.date_select :deadline %&gt;
    &lt;/div&gt;
  
    &lt;div id='id_of_second_div'&gt;
      &lt;%= f.date_select :date_started %&gt;
    &lt;/div&gt;
  
  &lt;% end %&gt;
  
  &lt;script&gt;
    $(function(){
       $('#id_of_second_div').hide();
       $('#challenge_category_one-shot').click(function(){ 
          $('#id_of_first_div').show().attr('disabled', false); 
          $('#id_of_second_div').hide().attr('disabled', true); 
       });
       $('#challenge_category_ongoing').click(function(){
         $('#id_of_first_div').hide().attr('disabled', true); 
         $('#id_of_second_div').show().attr('disabled', false);
       });
    });
  &lt;/script&gt;
  </code></pre>
  
  <h2>Radio Button HTML</h2>
  
  <pre><code>&lt;input class="date-format-switcher" type="radio" value="One-Shot" checked="checked" name="challenge[category]" id="challenge_category_one-shot" /&gt;
  
  &lt;input class="date-format-switcher" type="radio" value="Ongoing" name="challenge[category]" id="challenge_category_ongoing" /&gt;
  </code></pre>