html - How to properly update value when user clicks checkbox in jquery -

html - How to properly update value when user clicks checkbox in jquery -

i'm having issue updating value when user clicks on checkbox. if user clicks 1 time value added properly, if user makes quick consecutive clicks on same checkbox, value isn't added (or subracted when deselected) properly. values doubled. there way set timer on clicks checkbox or maybe improve way add together values?

here's jquery ajax:

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

and here's 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 %} {% 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>

i'm using symfony, if you're wondering syntax. help appreciated , allow me know if need more info. thanks!

before ajax call, add

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

in success , error block of ajax call, add:

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

this disable checkbox until ajax request done

jquery html ajax symfony2 checkbox