Tengo dos entradas, una de ellas debe tener el valor de Quantity y la otra tiene el valor de Price , la primera entrada, que es la cantidad de tipo number , tiene el atributo disabled cuando marque la casilla de verificación que se eliminó disabled ; al cambiarlo; está calculando el total de precio y cantidad.
Por ejemplo: quantity = 2 y price = 10 , por lo que el total debería ser igual a total=2*10=20
Pero el problema aquí cuando desmarque la casilla de verificación No quiero el nuevo cálculo. Debería obtener el cálculo predeterminado que guardó en la base de datos antes de incluir la quantity .
Basado en eso, aquí está el código de muestra que explica mi problema:
$(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 -->Una opción es guardar el valor original de la base de datos usando data-xxxx y mostrarlo cuando sea necesario.
<p id="total" data-original="40.00">40.00</p> ... $('#total').text($('#total').data('original')); Es mejor mover el controlador de eventos de change , de lo contrario, se adjuntará varias veces al marcar o desmarcar la casilla de verificación.
$(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 -->