The essence of the problem is as follows: we have a page for product promotion, ...

enter image description here

There is a JS code:

$(document).ready(function() { var whole = 0; var top_cusel = 0; var top2_cusel = 0; var top3_cusel = 0; var top4_cusel = 0; var balance = $("#balance").html(); balance = balance.replace(/[А-Яа-я]/g, ""); balance = balance.replace(/\s+/g, ""); balance = balance.replace(/\./g, ""); $( "input" ).change(function() { whole = 0; if ($("#check1").prop("checked") && $("#check2").prop("checked") && $("#check3").prop("checked")) { top4_cusel = $( "#day4-styler" ).find( ".jq-selectbox__select-text" ).html(); top4_cusel = top4_cusel.replace(/[А-Яа-я]/g, ""); top4_cusel = top4_cusel.replace(/\s+/g, ""); top4_cusel = top4_cusel.replace(/\./g, ""); if (top4_cusel == 1) { whole = {$setup.board_all_price}; } else if (top4_cusel == 3) { whole = {$setup.board_all_price}*3; } else if (top4_cusel == 7) { whole = {$setup.board_all_price}*7; } else if (top4_cusel == 14) { whole = {$setup.board_all_price}*14; } else if (top4_cusel == 28) { whole = {$setup.board_all_price}*28; } } else{ if ( $( "#check1" ).prop( "checked" ) ) { top_cusel = $( "#day1-styler" ).find( ".jq-selectbox__select-text" ).html(); top_cusel = top_cusel.replace(/[А-Яа-я]/g, ""); top_cusel = top_cusel.replace(/\s+/g, ""); top_cusel = top_cusel.replace(/\./g, ""); if (top_cusel == 1) { whole = whole + {$setup.board_up_price}; } else if (top_cusel == 3) { whole = whole + {$setup.board_up_price}*3; } else if (top_cusel == 7) { whole = whole + {$setup.board_up_price}*7; } else if (top_cusel == 14) { whole = whole + {$setup.board_up_price}*14; } else if (top_cusel == 28) { whole = whole + {$setup.board_up_price}*28; } } if ( $( "#check2" ).prop( "checked" ) ) { top2_cusel = $( "#day2-styler" ).find( ".jq-selectbox__select-text" ).html(); top2_cusel = top2_cusel.replace(/[А-Яа-я]/g, ""); top2_cusel = top2_cusel.replace(/\s+/g, ""); top2_cusel = top2_cusel.replace(/\./g, ""); if (top2_cusel == 1) { whole = whole + {$setup.board_color_price}; } else if (top2_cusel == 3) { whole = whole + {$setup.board_color_price}*3; } else if (top2_cusel == 7) { whole = whole + {$setup.board_color_price}*7; } else if (top2_cusel == 14) { whole = whole + {$setup.board_color_price}*14; } else if (top2_cusel == 28) { whole = whole + {$setup.board_color_price}*28; } } if ( $( "#check3" ).prop( "checked" ) ) { top3_cusel = $( "#day3-styler" ).find( ".jq-selectbox__select-text" ).html(); top3_cusel = top3_cusel.replace(/[А-Яа-я]/g, ""); top3_cusel = top3_cusel.replace(/\s+/g, ""); top3_cusel = top3_cusel.replace(/\./g, ""); if (top3_cusel == 1) { whole = whole + {$setup.board_vip_price}; } else if (top3_cusel == 3) { whole = whole + {$setup.board_vip_price}*3; } else if (top3_cusel == 7) { whole = whole + {$setup.board_vip_price}*7; } else if (top3_cusel == 14) { whole = whole + {$setup.board_vip_price}*14; } else if (top3_cusel == 28) { whole = whole + {$setup.board_vip_price}*28; } } } $( "#whole_to_spayment" ).html(whole + " " + "р."); $( "#whole_to_spayment_val" ).val(whole + " " + "р."); if (whole > balance) { $("#oplata").attr("disabled", true); $("#alert-balance").css('display', 'block'); } else { $("#oplata").attr("disabled", false); $("#alert-balance").css('display', 'none'); } }).change(); }); 

Actually, the problem is that if we select different days, then the final amount does not change with us until we click the checkbox again.

  • $("input, select").change(function() { ... - Igor
  • @Igor kosher: $('input, select').on( 'input', function() { ... - Sergiks
  • None of these 2 options fit. If it is $ ("input") .change (function () {replace with one of your codes, then we will observe a convulsive jerking of the whole block shown in the screenshot. - vitagame
  • Can't you just hang onchange on select ?? - pnp2000
  • @vitagame - your .change(); at the end it will call the anonymous handler as many times as the number of elements selected by the selector (in the case shown - 8 times). The code in your question can not cause "convulsive jerking." - Igor

0