mardi 22 mars 2016

JQuery checkbox firing a second time before first finishes, only in IE

I am having a problem in IE11 (not happening in Chrome) where if I click my checkbox twice quickly, the click event is firing the second time without all of the logic from the first click being evaluated.

How it should work:
When being checked, some math is evaluated and if successful allows the checkbox to be checked and sets a value. Otherwise it undoes the checkbox and doesn't set the value. When being unchecked, it unsets the value that would have been set previously.

$(document).on("click", "[id*=chkRow]", function () {    
    if (!$(this).is(":checked")) {
        $("[id$=_SelectedTotal]").val( parseFloat($("[id$=_SelectedTotal]").val()) - 1 );
    }    
    else {    
        if ( MATH CHECK GOES HERE ) {
            $("[id$=_SelectedTotal]").val( parseFloat($("[id$=_SelectedTotal]").val()) + 1 );
        }
        else {
            $(this).prop('checked', false);
        }
    }
});

In IE if you click slowly enough, it is working correctly. However if you "doubleclick" the checkbox, the first click works as expected (no math, and then unchecks the box) but the second click acts as if the box IS checked and does the reverse math and leaves the box unchecked. This leads to my "total" box getting incorrect values.

I have tried disabling the checkbox as the first step of the function, and then reenabling it as the last step, but this did not solve the issue.

What's going on, and how can I fix it?




Aucun commentaire:

Enregistrer un commentaire