Checkbox on "change" function does not work in Safari browser at first click

Question

I have this function:

function CompareProduct(product_id) {
    $(document).ready(function() {
        $('#' + product_id).on('change', function() {
            if ($(this).is(':checked')) {
                CheckboxCompare.Add(product_id);
                $('#' + product_id).attr("disabled", true);
            } else if (!$(this).is(':checked')) {
                compare_product_remove(product_id);
                $('#' + product_id).attr("disabled", true);
                $('.compare-product_' + product_id).fadeOut();
            }
        });
    });
}

Edited... HTML:

{% for product in products %}
    <input class="compare-checkbox" autocomplete="off" type="checkbox" name="{{ product.product_id }}" value="1" id="{{ product.product_id }}" data-toggle="tooltip" title="{{ button_compare }}" onclick="CompareProduct('{{ product.product_id }}');" />
 {% endfor %}

Which working fine on Chrome, Mozilla, but does not work on Safari. On Safari browser, when click first time just a checbox become selected... when I click second time checkbox deselecting and function works. And when I click again function also working. So first click of the checkbox on Safari does not work. How to solve this problem?

EDITED: I find solution for my issue... on Safari browser also working fine:

function CompareProduct(product_id) {
var checkbox = document.getElementById(product_id);
        if (checkbox.checked == true) {
            CheckboxCompare.Add(product_id);
        } else if (checkbox.checked != true){
            compare_product_remove(product_id);  
        }
}