The Linux Page

.change() not working right in Internet Explorer

I had a problem with jQuery and was wondering what could be wrong. Looking around for a solution, it was clear that Internet Explorer is the problem. Not the other way around (As usual.) The thing is that the function works, just not in realtime.

So... I have a Terms and Conditions flag, when you click it, I want to enable the Submit button in the form (by default the button is disabled.)

So I have a function something like this:

var valid = function check_valid() {
  // compute valid
  var valid = ...;
  // assume valid === true if button should be enabled
  button.attr('disabled', !valid);
}

Now I want to run that function any time the checkbox is clicked, the space key is used, or the arrows are used (that's in case of a radio button group.) So I write this:

$('#terms_of_use').change(valid);

This means: Any time the Terms of Use checkbox changes, call the valid function.

However, that doesn't do anything with MS-Windows unless you click outside of the Terms of Use checkbox or hit tab (to go to another element.) That's not exactly what I want since I need the valid function to be called as soon as the checkbox changes. A simple solution is to add the following function. It slows down things a bit, but it has the advantage to make it work the way I want:

// For I.E., force blur/focus if checkbox/radio is clicked/keyed
$(function(){
  if($.browser.msie){
    var f=function(){this.blur();this.focus();};
    $('input:checkbox').click(f).keyup(f);
    $('input:radio').click(f).keyup(f);
  }
});

This means for any checkbox or radio buttons, call function f when clicked or a key up event was received. Function f will in turn run a blur() and then a focus(). This means it removes keyboard focus then reassign it to that element. This triggers the change() event. Notice that we add those function calls only if we're running in the MSIE browser so Firefox, Chrome, Opera, etc. are not affected.

Source: https://norman.walsh.name/2009/03/24/jQueryIE