title: How hide/show enable/disable HTML elements using Javascript/jQuery?
body: <p>Here is what I have :</p>
  
  <p>IF the user does’t update their email, hide the email_again</p>
  
  <p>Email           _______________</p>
  
  <p>ELSE show email_again ( email has been up dated )</p>
  
  <p>Email           _______________</p>
  
  <p>Email Again _______________</p>
  
  <p>GOAL</p>
  
  <p>IF there <code>is</code> an <code>input</code> on email_again, and it’s <code>fail</code> the validation when submitting, I want to</p>
  
  <pre><code>⁃   redirect with old input
  ⁃   show the label of email_again
  ⁃   show the input of email_again
  ⁃   enable email_again
  </code></pre>
  
  <p>ELSE</p>
  
  <pre><code>⁃   Redirect with old input
  ⁃   Give them error message that Email Again is required
  ⁃   show the label of email_again
  ⁃   show the input of email_again
  ⁃   enable email_again
  </code></pre>
  
  <p><strong>CODE</strong>
      </p>
  
  <pre><code>  var old_email = $("#email").val();
    $('#email').on('input', function (event) {
  
    var email = $(this).val();
  
    if (email === old_email) { 
  
      $('#email_again').prop('disabled', true);
      $('#email_again_label').hide();
      $('#email_again').hide();
  
    } else {
  
      $('#email_again').prop('disabled', false);
      $('#email_again_label').show();
      $('#email_again').show();
  
    }
  
  }); 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Can someone help me tweak my code ? or suggest any better choices.</p>