title: Show / hide text input when checkbox is disabled
body: <p>This snippet successfully shows the text input <code>#typeOther</code> when the checkbox <code>#securityCl</code> is clicked. However, to avoid submitting the form with unneeded text if the user switches to another radio button, or disables the inputs altogether by clicking the <code>#securityCl</code> checkbox again, I would like to hide and clear the <code>#typeOther</code> text input.</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;input type="checkbox" id="securityCl" name="securityCL"&gt;
                  &lt;label for="securityCl"&gt;Security Clearance - Type:&lt;/label&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="indent"&gt;
                  &lt;input type="radio" id="typeTsSci" name="securityType" disabled="disabled"&gt;
                  &lt;label for="typeTsSci"&gt;TS/SCI&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="radio" id="typeS" name="securityType" disabled="disabled"&gt;
                  &lt;label for="typeS"&gt;S&lt;/label&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="indent"&gt;
                  &lt;input type="radio" id="typeTs" name="securityType" disabled="disabled"&gt;
                  &lt;label for="typeTs"&gt;TS&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="radio" id="typeOther" name="securityType" disabled="disabled"&gt;
                  &lt;label for="typeOther"&gt;Other:&lt;/label&gt;&lt;br&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type="text" id="otherText" name="securityType" disabled="disabled"&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>And here's my jQuery:</p>
  
  <pre><code>    $(function() {
          var hide = $('#otherText').hide();
          $('#securityCl').click(function() {
              $('input[name="securityType"]').prop('disabled', !this.checked);
              $('#typeOther').click(function() {
                  $(hide).show();
              });
          });
      });
  </code></pre>