title: JQuery code not working IE10 compatibility mode, IE9 or older
body: <p>Sorry for being long-winded ahead of time, but I have a continuing issue, despite great help from a previous post, listed here:</p>
  
  <p><a href="http://bit.ly/11aBzBV" rel="nofollow">http://bit.ly/11aBzBV</a></p>
  
  <p>With that being said, I have modified my code to check if two boxes have been checked.  Here's a link to my code:</p>
  
  <p><a href="http://jsfiddle.net/UsraB/5/" rel="nofollow">http://jsfiddle.net/UsraB/5/</a></p>
  
  <p>Basic code here:</p>
  
  <pre><code>$(function () {
      $('tr').on('change', '.AIR', function () {
          console.log(this.checked)
          if (!$(this).closest('td').siblings('td').find('.HEAD').prop('checked')) {
              alert("HEAD has to be checked if AIR is to be checked.\nPlease go back and check HEAD.");
              $(this).prop('checked', !this.checked);
              return false;
          }
      });
  
      $('tr').on('change', '.HEAD', function () {
          console.log(this.checked)
          if ($(this).closest('td').siblings('td').find('.AIR').is(':checked')) {
              alert("HEAD has to be checked if AIR is to be checked.\nPlease leave HEAD checked.");
              $(this).prop('checked', !this.checked);
              return false;
          }
      });
  });
  
  &lt;table&gt;
      &lt;tr class="row"&gt;
          &lt;td&gt;Store 1&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" /&gt;Foo&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" class="HEAD" /&gt;HEAD&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" /&gt;Do&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" class="AIR" /&gt;AIR&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" /&gt;Me&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="row"&gt;
          &lt;td&gt;Store 2&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" /&gt;Foo&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" class="HEAD" /&gt;HEAD&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" /&gt;Do&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" class="AIR" /&gt;AIR&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="checkbox" value="" name="" /&gt;Me&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>If AIR is checked by the user, an alert will pop up and tell the user to make sure HEAD is checked.  If both AIR and HEAD is checked appropriately by the user, and the user then tries to uncheck HEAD, an alert will let the user know to leave HEAD checked.</p>
  
  <p>This works well in Chrome, Firefox (as far back as 16) and IE10.  For some reason, it doesn't work in IE8 or IE9 or IE10 compatibility.  No jquery checks seem to happen at all.  I've even taken the same jsfiddle link mentioned above into a cross browser emulator and the code doesn't work in the IE8/9 environment.  Running Developer tools seem to trigger it when I tried to debug my code, but nothing else really is clear.  What gives?  What am I missing?  </p>
  
  <p>Furthermore, when run in Firefox, the jquery would cycle through all the checkboxes on each alert, for the count of the amount of checkboxes in the row (jsfiddle has 6; production code has 5).  I was able to halt that with a return false, but wasn't sure if that were correct.</p>
  
  <p>Any ideas on where to fix my code?  Are there any basic javascript alternatives?  I'm still learning jquery/javascript, so it's all new to me.  Help is greatly appreciated; thanks!</p>