title: Javascript to enable/disable radio buttons when text field is cleared or chars are present
body: <p>I'm working on a little script that will disable a form field if certain radio button are ticked or if the input filed has characters to disable the radio buttons</p>
  
  <p>So what I'm wanting my code to do is when the User enters the text field and adds at least one character of any type to disable the radio buttons and if that field is cleared to re-enable the radio buttons</p>
  
  <p>For some reason when I'm doing either or, my "Enabled" alert keeps showing and the radio buttons aren't being disabled</p>
  
  <p>to get the alert to pop, need to click outside of the input field, I would like this to be a mouseout if possible but I can work on that later</p>
  
  <p>If the value is entered within the form directly, the radio buttons are disabled but I can't get them enabled once the filed is cleared</p>
  
  <p>Steps:
  Enter text in text field, if value isn't set in the form. Radio buttons stay disabled</p>
  
  <p>Enter Value within the form, the text buttons stay disabled when the text field is cleared</p>
  
  <p>Working Parts:
  If radio btn "Yes" is ticked display "test" string and disable text field
  If Radio btn "No" is ticked then enable text field</p>
  
  <p>jQuery version in use: 1.9</p>
  
  <p>Below is my JavaScript and below that is the HTML</p>
  
  <p>Script:
          </p>
  
  <pre><code>$(function() {
  
      var tlHeader = 'Test';
  
      var f2 = $('#field_2').val();
  
      // This function controls inpput box toggling on/off radio buttons
      $( '#field_2' ).change(function() {
          if(f2.length != 0) {
              alert( "Disabled" )
              $("input[name=toggle]").prop('disabled', true)
          } else if(f2.length == 0) {
              alert( "Enabled" ) 
              $("input[name=toggle]").removeProp('disabled')
          };
      }); 
  
     window.invalidate_input = function() {
        // This function controls radio btn actions
          if ($('input[name=toggle]:checked').val() == "Yes") {
              $('#field_2').attr('disabled', 'disabled'),
              $('#thgtLdr').html( tlHeader );
              $('#thgtLdr').not("No").show();
  
          } else if ($('input[name=toggle]:checked').val() == "No") {
              $('#field_2').removeAttr('disabled'),
              $('#thgtLdr').not("Yes").hide();
          }
     };
  
  
      $("input[name=toggle]").change(invalidate_input);
  
      invalidate_input();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>      &lt;body&gt;
  
  &lt;div id=rdTest&gt;
      &lt;div class="inputField"&gt;
          &lt;label&gt;Focal Image:&lt;/label&gt;
          &lt;input name="FocalImage" type="text" id="field_2" class='textbox' value="" /&gt;
      &lt;/div&gt; &lt;!-- End input field --&gt;
  
  
    &lt;div class="radioGroup"&gt;
      &lt;label&gt;Test Page:&lt;/label&gt;
          &lt;input type='radio' name='toggle' value='Yes' id="tglyes"/&gt;Yes
          &lt;input type='radio' name='toggle' value='No' id="tglno"/&gt;No
    &lt;/div&gt; 
  
  &lt;div id="thgtLdr"&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;  
  
  
  
  &lt;/body&gt; 
  </code></pre>