如何在用户单击jquery中的复选框时正确更新值

当用户单击复选框时，更新值时出现问题。如果用户在正确添加值后单击，但是如果用户在同一复选框上快速连续单击，则正确取消选择时不会添加或删除该值。值会加倍。有没有办法在点击复选框时设置计时器，或者有更好的方法添加值

以下是使用ajax的jquery：

function reconcile(glid) 
{
    var reconcile = 1;
    var debit = $('#debit' + glid).val() * 1;
    var credit = $('#credit' + glid).val() * 1;
    var outstanding = $('#outstanding').val() * 1;
    var reconciled = $('#reconciled').val() * 1;
    var difference = $('#difference').val() * 1;


    if($('#checkbox' + glid).prop('checked') === true) reconcile = 1;
    else if($('#checkbox' + glid).prop('checked') === false) reconcile = 0;

    $.ajax(
    {
        type: 'GET',
        url: '/Ledger/UpdateReconciled/' + glid + '/' + reconcile,
        success: function(data) 
        {
            if (data == 1) 
            {
                $('#text' + glid).html('Reconciled');

                $('#reconciled').val(reconciled *1 + debit *1 - credit *1);
                $('#outstanding').val(outstanding *1 - debit *1 + credit *1);
            }
            else if (data == 0) 
            {
                $('#text' + glid).html('Outstanding');
                $('#reconciled').val(reconciled *1 - debit *1 + credit *1);
                $('#outstanding').val(outstanding *1 + debit*1 - credit*1);
            }
            updateDifference();
        } ,
        error :function() 
        {
            alert(data);
        } 
    });
}

下面是html：

{{ form_rest(form) }}

<table class="jtable" id='dattable'>
<caption class="ui-widget ui-widget-header">Bank Ledger</caption>
<thead>
    <tr>
        <th style='width: 15%;' class='ui-state-default'>Account</th>
        <th style='width: 15%;' class='ui-state-default'>Date</th>
        <th style='width: 25%;' class='ui-state-default'>Reference</th>
        <th style='width: 15%;' class='ui-state-default'>Note</th>
        <th style='width: 15%;' class='ui-state-default'>Debit</th>
        <th style='width: 15%;' class='ui-state-default'>Credit</th>
        <th style='width: 15%;' class='ui-state-default'>Balance</th>
        <th style='width: 15%;' class='ui-state-default'></th>
    </tr>
</thead>
<tbody>
    {% set outstanding = 0 %}
    {% set reconciled = 0 %}
{% for record in records %}
    {% if (record.reconciled == 1) %}
        {% set reconciled = reconciled + record.debit - record.credit %}
    {% elseif (record.reconciled == 0) %}
        {% set outstanding = outstanding + record.debit - record.credit %}
    {% endif %}
    <tr>
        <td class='ui-widget-content'>{{ record.account.number }}</td>
        <td class='ui-widget-content'>{{ record.date|date('Y-m-d') }}</td>
        <td class='ui-widget-content'>{{ record.entry }} | {{ record.reference }}</td>
        <td class='ui-widget-content'>{{ record.note }}</td>
        <td class='ui-widget-content'><input id='debit{{ record.id }}' type='hidden'    value='{{ record.debit }}'>{{ record.debit|number_format(2, '.', ',') }}</td>
        <td class='ui-widget-content'><input id='credit{{ record.id }}' type='hidden' value='{{ record.credit }}'>{{ record.credit|number_format(2, '.', ',') }}</td>
        <td class='ui-widget-content'><input id='checkbox{{ record.id }}' onclick='reconcile({{ record.id }});' type='checkbox'{% if record.reconciled == true %} checked='checked'{% endif %}></td>
        <td class='ui-widget-content'><div id='text{{ record.id }}'>{% if record.reconciled == true %}Reconciled{% else %}Outstanding{% endif %}</div></td>
    </tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
    <td class='ui-widget-content list_total'>Account Balance</td>
    <td class='ui-widget-content list_total'>Outstanding: <input id='outstanding' type='number' value='{{ outstanding }}' readonly></td>
    <td class='ui-widget-content list_total'>Reconciled: <input id='reconciled' type='number' value='{{ reconciled }}' readonly></td>
    {% set difference = balance + reconciled %}
    <td class='ui-widget-content list_total' colspan='3'>Difference: <input id='difference' type='number' value='{{ difference }}' readonly></td>
    <td class='ui-widget-content list_total'>{{ balance|number_format(2, '.', ',') }}      </td>
    </tr>


</tfoot>
</table>
    <button type='submit' id='postEntries' name='postEntries' value = 'true'>Post</button>
</form>

---

如果您想知道语法，我使用的是Symfony。非常感谢您的帮助，如果您需要更多信息，请告诉我。谢谢

在ajax调用之前，添加

$('#checkbox' + glid).attr("disabled", true);

在ajax调用的成功和错误块中，添加：

$('#checkbox' + glid).removeAttr("disabled");

---

这将禁用复选框，直到ajax请求完成

我可能会在ajax请求运行时禁用复选框或阻止UI。您认为我应该如何执行此操作？我已经研究了Jquery BlockUI插件。你觉得这样行吗？谢谢你的回答。它正是我所需要的。但是，我注意到，如果用户快速选择多个复选框，同样的问题也会发生。我通过禁用所有复选框并在ajax调用后重新启用所有复选框修复了这个问题。谢谢你的建议。