Jquery check box change function not working in IE 8

Question

I have following jquery code, where on click of a check box I will show a popup value.

Except in IE,in all other browser it works as expected. That is, on change the check box will be checked and the popup will be opened.

However in IE8 its not getting checked, however popup is displayed properly.

Code :

$('#TAndC').change(function(){

    if( $('input[name="TAndC"]').is(':checked')) 
    {
         $('#TandCBox').show();
         var termsandcondition = GetEnum().TermsandConditionsPageId;
         var actionURL = '@Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
         $('.popUpForm').load(actionURL);
         var msgBox = $('#terms').attr('href');
         MaskMsgPopUp(msgBox);
         return false;
     }
});

Answer 1

If your element is a checkbox and not a dropdown then use click anyway.

If your selector is referring to a dropdown use click if you need to support IE8 and older.

See why that is below.

According to the MSDN for change/onchange , the event is not triggered until the change is committed.

In addition the event is also not triggered when the value is changed programmatically.

To quote:

This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus. In addition, this event is executed before the code specified by onblur when the control is also losing the focus. The onchange event does not fire when the selected option of the select object is changed programmatically. Changed text selection is committed.

To invoke this event, do one of the following:

• Choose a different option in a select object using mouse or keyboard navigation.
• Alter text in the text area and then navigate out of the object.

If you must support IE8 and older, you are probably better of to use the click event instead which get's triggered when you release the mouse and your new choice is selected.

Answer 2

instead of .change use below code and try

$(document).ready(function(){

$(document).on('click','#TAndC',click_function){

 if( $('input[name="TAndC"]').is(':checked')) 
 {
      $('#TandCBox').show();
      var termsandcondition = GetEnum().TermsandConditionsPageId;
      var actionURL = '@Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
      $('.popUpForm').load(actionURL);
      var msgBox = $('#terms').attr('href');
      MaskMsgPopUp(msgBox);
      return false;
  }
 });
});