In my form I have a CheckBox, and I have a label to CheckBox. In firefox & IE9, the CheckBox change event works as expected ,but in IE8 & IE7 , the event fires when click the label but not the checkbox.

My HTML

<div class="item-container">
    <div class="label-container">
    </div>
    <div class="textbox-container">
        <input id="AddNewProductCategory" class="" type="checkbox" width="20px" height="20px"
            value="1" name="addnewproductcategory" tabindex="1900" />
    </div>
    <div class="after-checkbox-label">
        <label class="Verdana11-424039" for="AddNewProductCategory">
            Add New Service Category</label>
    </div>
</div>

My jQuery

jq('#AddNewProductCategory').change(function(){
    jq('#CategoryName').next('label[for=CategoryName]').remove();
    jq('#Category').next('label[for=Category]').remove();

    if (!jq('#AddNewProductCategory').is(':checked')) {
         alert("in change");
        jq('input[name="newcategory"]').val('');
        jq('#CategoryName').hide();     
        jq('#store_category').hide();
        jq('#Category').removeAttr('disabled');

    }
    else {
        jq('#Category').attr('disabled', 'disabled');
        jq('#CategoryName').show();     
        jq('#store_category').show();
    }
});

In my form I have a CheckBox, and I have a label to CheckBox. In firefox & IE9, the CheckBox change event works as expected ,but in IE8 & IE7 , the event fires when click the label but not the checkbox.

My HTML

<div class="item-container">
    <div class="label-container">
    </div>
    <div class="textbox-container">
        <input id="AddNewProductCategory" class="" type="checkbox" width="20px" height="20px"
            value="1" name="addnewproductcategory" tabindex="1900" />
    </div>
    <div class="after-checkbox-label">
        <label class="Verdana11-424039" for="AddNewProductCategory">
            Add New Service Category</label>
    </div>
</div>

My jQuery

jq('#AddNewProductCategory').change(function(){
    jq('#CategoryName').next('label[for=CategoryName]').remove();
    jq('#Category').next('label[for=Category]').remove();

    if (!jq('#AddNewProductCategory').is(':checked')) {
         alert("in change");
        jq('input[name="newcategory"]').val('');
        jq('#CategoryName').hide();     
        jq('#store_category').hide();
        jq('#Category').removeAttr('disabled');

    }
    else {
        jq('#Category').attr('disabled', 'disabled');
        jq('#CategoryName').show();     
        jq('#store_category').show();
    }
});

• javascript
• jquery
• html
• css

• what version of jquery do you have ? – Alan Commented Nov 4, 2011 at 6:26
• 6 According to this document api.jquery./change: "As of jQuery 1.4, the change event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers." Consider changing jquery version. – Alan Commented Nov 4, 2011 at 6:29
• let us know if it helped – Alan Commented Nov 4, 2011 at 6:43
• 1 hmmm........... i changed the 'change' event to 'click' event and now it works , thanks guys – Kanishka Panamaldeniya Commented Nov 4, 2011 at 6:55
• Just a tip - don't paste the code here, add it on jsfiddle and give us the link. Live examples are better. – biphobe Commented Nov 8, 2011 at 7:49

1 Answer 1

Just for future references, from what I remember, the "change" event is a bit buggy in older versions of IE.

You have to use the propertychange event in IE to get it to behave as expected. The code I like to use is:

Edit 2 (back to the core)

$(element).on(navigator.userAgent.match(/msie/i) ? "propertychange" : "change", function(evt) {
    evt.preventDefault();
    // Your code here
});

Edit 1 (buggy, not reliable)

$(element).on(!$.support.changeBubbles ? "propertychange" : "change", function(evt) {
    evt.preventDefault();
    // Your code here
});

This code has been updated to work with jQuery 1.9+ with some input from Marius in the ments.

Original (deprecated)

Here is the old code for those using the older versions of jQ:

$(element).bind($.browser.msie ? 'propertychange' : 'change', function(evt) {
    evt.preventDefault();
    // Your code here
});