第一次单击时，“更改”功能的复选框在Safari浏览器中不起作用

Question

我有这个功能：

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();
            }
        });
    });
}

已编辑... 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 %}

虽然可以在Chrome，Mozilla上正常运行，但不能在Safari上运行。 在Safari浏览器中，当第一次单击时，仅一个复选框被选中...当我单击第二次时，复选框取消选择，功能起作用。当我再次单击功能时，它也起作用。    因此，在Safari上第一次单击复选框不起作用。 如何解决这个问题？

已编辑： 我找到了解决我问题的方法...在Safari浏览器上也可以正常工作：

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);  
        }
}