How to get the default calculation for certain equation after uncheck checkbox using JS-CodePudding

I have two inputs one of them should have the value of Quantity and the other one have the value of Price the first input which is quantity of type number has disabled attribute when check the checkbox the disabled removed then; when changing it; it's calculating the total of price and quantity.

For example: quantity = 2 and price = 10 so the total should equals total=2*10=20

But the problem here when uncheck the checkbox I don't want the new calculation. It should get the default calculation that it saved in the database before including the quantity.

Based in that here is the sample code explaining my issue:

    $(document).on('click', '.check_box', function(){
        var price = $('.price').val();
        if(this.checked){
            $('.quantity').removeAttr('disabled');
            $(document).on('change', '.quantity', function(){
                var quantity = $(this).val();
                total = quantity*price;
                $('#total').text(total.toFixed(2));
            });
        } else {
            $('.quantity').attr('disabled', 'disabled');
            // What should I do in else statement?
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>#</td>
      <td>Item name</td>
      <td>Quantity</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="check_box" /></td>
      <td>Pizza</td>
      <td><input type="number" class="quantity" value="1" disabled/></td>
      <td><input type="text" class="price" value="20.00" disabled /></td>
    </tr>
  </tbody>
</table>
Total: <p id="total">40.00</p> <!-- Let's say this total already saved in database before -->

I hope you guys getting my issue clearly. Thanks in advance.

CodePudding user response：

An option is to save the original value from database using data-xxxx and show it when required.

<p id="total" data-original="40.00">40.00</p>

...

$('#total').text($('#total').data('original'));

It's better to move the change event handler out, otherwise it will attach multiple times when tick/untick the checkbox.

$(document).on('click', '.check_box', function(){
    if(this.checked){
        $('.quantity').removeAttr('disabled');
        $('.quantity').trigger('change');
    } else {
        $('.quantity').attr('disabled', 'disabled');
        $('#total').text($('#total').data('original'));
    }
});
$(document).on('change', '.quantity', function(){
    if (!this.disabled) {
        var quantity = $(this).val();
        var price = $('.price').val();
        total = quantity*price;
        $('#total').text(total.toFixed(2));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>#</td>
      <td>Item name</td>
      <td>Quantity</td>
      <td>Price</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="check_box" /></td>
      <td>Pizza</td>
      <td><input type="number" class="quantity" value="1" disabled/></td>
      <td><input type="text" class="price" value="20.00" disabled /></td>
    </tr>
  </tbody>
</table>
Total: <p id="total" data-original="40.00">40.00</p> <!-- Let's say this total already saved in database before -->