mercredi 11 novembre 2015

check and un check the check box with table tr using jquery

I am trying to check the check box, when click on the table row (tr). and get the data-value of the check box and show in the table as selected total amount, before showing the selected total amount, there is a condition to check whether the

if( (selected_amount + selected_total_amount) <= Amount )

Then only selected_amount add with selected_total_amount

This condition is working fine if we click on the tr, but when i click on the check box the function fires twice.

how to solve this.

http://ift.tt/1Pom4zZ

<table class="table chqSummryTB" style="margin-top:10px"; border="1">
    <thead>
        <tr>
            <th colspan="3"></th>
            <th colspan="2" style="text-align:right;">
                Amount </br>
                <input type="text" id="partyTotAmount" readonly="readonly"  
                 value="5000.00" 
                style="border:0px ;text-align:right; font-size:15px" /> 
                <input type="hidden" id="paySum" />
            </th>
        <th style="text-align:right;">
            No of cheques </br>
           <input type="text" name="totChqRow2" id="totChqRow" readonly="readonly"  value="0" 
            style="width:100%; border:0px ;text-align:right; font-size:15px" /> 
        </th>
        <th style="text-align:right;width:15%">
            Selected Total Amount</br> 
           <input type="text" id="SelcTotAmount" readonly="readonly" value="0.00"
            style="border:1px; width:100%; text-align:right; font-size:15px" /> 
      </th>
    </tr>
    <tr style="background: brown;color: #fff;">                
        <th>No </th>
        <th>Cheque No</th>
        <th>Customer Name</th>
        <th>Ref No</th>
        <th>Type</th>
        <th>Amount</th>
        <th>Date</th>                     
    </tr>
    </thead>

    <tbody style="overflow:scroll; height:500px;">    
        <tr class="checked">
            <td width="3%" class="checkBxTD">                           
                <input type="checkbox"  class="checked" data-value="2500" 
                value="2015-10-22||2000047083002||2500||Own||735||140-1562-100||31" name="ChqID[]" />
            </td>
            <td class="checkBxTD">2000047083002</td>
            <td class="checkBxTD">Cus 1</td>
            <td class="checkBxTD">3</td class="checkBxTD">
            <td class="checkBxTD">Own</td class="checkBxTD">
            <td style="text-align:right;" class="checkBxTD">2,500.00</td>
            <td class="checkBxTD">2015-10-22</td>

        </tr>
        <tr class="checked">
            <td width="3%" class="checkBxTD">                           
                <input type="checkbox"  class="checked" data-value="2500" 
                 value="2015-10-22||1000587010002||2500||Party||735||040-100-7560||32" name="ChqID[]" />
            </td>
            <td class="checkBxTD">1000587010002</td>
            <td class="checkBxTD">Cus 1</td>
            <td class="checkBxTD">3</td class="checkBxTD">
            <td class="checkBxTD">Party</td class="checkBxTD">
            <td style="text-align:right;" class="checkBxTD">2,500.00</td>
            <td class="checkBxTD">2015-10-22</td>

        </tr>
        <tr class="checked">
            <td width="3%" class="checkBxTD">                           
                <input type="checkbox"  class="checked" data-value="100" 
                 value="2015-10-24||1000707010002||100||Own||605||140-1562-100||33" name="ChqID[]" />
            </td>
            <td class="checkBxTD">1000707010002</td>
            <td class="checkBxTD">Cus 2</td>
            <td class="checkBxTD">5</td class="checkBxTD">
            <td class="checkBxTD">Own</td class="checkBxTD">
            <td style="text-align:right;" class="checkBxTD">100.00</td>
            <td class="checkBxTD">2015-10-24</td>

        </tr>
        <tr class="checked">
            <td width="3%" class="checkBxTD">                           
                <input type="checkbox"  class="checked" data-value="500" 
                 value="2015-11-07||1000017010002||500||Own||678||78100||36" name="ChqID[]" />
            </td>
            <td class="checkBxTD">1000017010002</td>
            <td class="checkBxTD">Cus 3</td>
            <td class="checkBxTD">11</td class="checkBxTD">
            <td class="checkBxTD">Own</td class="checkBxTD">
            <td style="text-align:right;" class="checkBxTD">500.00</td>
            <td class="checkBxTD">2015-11-07</td>

        </tr>                       

</tbody>

</table>



 <script>
     $(document).on('click', '.checked', function(){
    var count = 0;var sum = 0;

    //alert( $(this).closest('tr').find("input[type=checkbox]").prop('checked') );
    if($(this).closest('tr').find("input[type=checkbox]").prop('checked')){

        $(this).closest('tr').find("input[type=checkbox]").prop('checked', false);
        $(this).closest('tr').css('background-color','#FFF');
        $(this).closest('tr').css('color','#000');

        SelcTotAmount = parseFloat( $('#SelcTotAmount').val() );
        var checkVal = parseFloat( $(this).closest('tr').find("input[type=checkbox]").data("value") );
        $('#SelcTotAmount').val( SelcTotAmount - checkVal);
        //alert(checkVal);

    }else{

        partyTotAmount = parseFloat( $('#partyTotAmount').val() );
        var checkVal = parseFloat( $(this).closest('tr').find("input[type=checkbox]").data("value") );
        var yetPaid = parseFloat( $('#SelcTotAmount').val() );
        //console.log(checkVal +' === ' + yetPaid);
        allPAid = checkVal + yetPaid;

        if( allPAid > partyTotAmount){

            alert('Maximum payable amount exceeds, if you select this cheque!');    

        }else{  

            $(this).closest('tr').find("input[type=checkbox]").prop('checked', true);                           
            $(this).closest('tr').css('background-color','rgba(3, 60, 107, 0.99)');
            $(this).closest('tr').css('color','#fff');

        }

    }

    $('.hiddnClas').remove();

    $(".checked:checked").each(function(){      

        count += 1;
        sum += parseFloat( $(this).data('value') );             

    });  


    $('#paySum').val( parseFloat($('#partyTotAmount').val() - sum).toFixed(2) );    
    $('#SelcTotAmount').val(sum.toFixed(2));    
    $('#totChqRow').val(count);
    $('#chqcount').val(count);
}); 

    </script>




Aucun commentaire:

Enregistrer un commentaire