如何正確更新值，當用戶點擊jquery中的複選框

Question

我有一個問題，當用戶點擊一個複選框時更新值。如果用戶在正確添加值後單擊，但是如果用戶在同一個複選框上快速連續點擊，則該值不會正確添加（或取消選擇時會被縮小）。值得到加倍。有沒有辦法在點擊複選框上設置計時器，或者更好的方式來添加值？

下面是使用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的，如果你想知道有關語法。任何幫助非常感謝，並讓我知道如果你需要任何更多的信息。謝謝！

Answer 1

Ajax調用之前，添加

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

在Ajax調用的成功和錯誤塊，添加：

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

這將禁用複選框，直到ajax請求完成