#javascript #html #jquery
Вопрос:
У меня есть два входа, один из которых должен иметь значение Quantity , а другой-значение Price первого ввода, которое является number атрибутом типа «количество disabled «, когда установите флажок disabled «удалить», затем; при его изменении; он вычисляет общую сумму цены и количества.
Например: quantity = 2 и price = 10 поэтому total должно быть равно total=2*10=20
Но проблема здесь в том, что когда я снимаю флажок, я не хочу новых вычислений. Он должен получить расчет по умолчанию, сохраненный в базе данных перед включением quantity .
Исходя из этого, вот пример кода, объясняющего мою проблему:
$(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? } }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;tablegt; lt;theadgt; lt;trgt; lt;tdgt;#lt;/tdgt; lt;tdgt;Item namelt;/tdgt; lt;tdgt;Quantitylt;/tdgt; lt;tdgt;Pricelt;/tdgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;tdgt;lt;input type="checkbox" class="check_box" /gt;lt;/tdgt; lt;tdgt;Pizzalt;/tdgt; lt;tdgt;lt;input type="number" class="quantity" value="1" disabled/gt;lt;/tdgt; lt;tdgt;lt;input type="text" class="price" value="20.00" disabled /gt;lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; Total: lt;p id="total"gt;40.00lt;/pgt; lt;!-- Let's say this total already saved in database before --gt; Ответ №1:
Один из вариантов-сохранить исходное значение из базы данных с помощью data-xxxx и показать его при необходимости.
lt;p id="total" data-original="40.00"gt;40.00lt;/pgt; ... $('#total').text($('#total').data('original')); Лучше удалить обработчик change событий, иначе он будет прикрепляться несколько раз при установке/снятии флажка.
$(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)); } }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;tablegt; lt;theadgt; lt;trgt; lt;tdgt;#lt;/tdgt; lt;tdgt;Item namelt;/tdgt; lt;tdgt;Quantitylt;/tdgt; lt;tdgt;Pricelt;/tdgt; lt;/trgt; lt;/theadgt; lt;tbodygt; lt;trgt; lt;tdgt;lt;input type="checkbox" class="check_box" /gt;lt;/tdgt; lt;tdgt;Pizzalt;/tdgt; lt;tdgt;lt;input type="number" class="quantity" value="1" disabled/gt;lt;/tdgt; lt;tdgt;lt;input type="text" class="price" value="20.00" disabled /gt;lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; Total: lt;p id="total" data-original="40.00"gt;40.00lt;/pgt; lt;!-- Let's say this total already saved in database before --gt; Комментарии:
1. Да, братан, я понял. Действительно ценю это.
2. Извини, братан. но что, если у нас есть более одного входа?
3. может быть похоже, но вам нужно четко определить, какова формула расчета, если некоторые входы отключены, а некоторые нет.