este es mi javascript que funciona para campos de entrada individuales pero quiero que funcione para entradas múltiples.
aquí, si trato de insertar un valor para input class=adv más que el valor de entrada fijo de class=full , no lo permitirá
var $full = $('[class=full]'); var $adv = $('[class=adv]'); $adv.on('keyup keydown', function(e) { var fullPay = parseInt($full.val(), 10); var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10 if (advPay > fullPay && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $adv.val(''); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" name="full" class="full" value="5"> <input type="number" name="adv" class="adv" />La línea efectiva:
$('[class=full]').val()solo tomará el primer elemento con clase "full".
Debe usar la navegación DOM relativa dentro del controlador, por ejemplo:
$(this).prev().val() Similar a $adv.val() , use $(this).val() y $(this).val('') para borrar la entrada actual.
También puede usar el evento input que capturará más eventos, como pegar con el mouse.
$('[class=adv]').on('input', function(e) { var fullPay = parseInt($(this).prev().val(), 10); var advPay = parseInt($(this).val(), 10); if (advPay > fullPay && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(''); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" name="full" class="full" value="5"> <input type="number" name="adv" class="adv" /> <br/> <input type="number" name="full" class="full" value="55"> <input type="number" name="adv" class="adv" /> <br/> <input type="number" name="full" class="full" value="555"> <input type="number" name="adv" class="adv" /> Usar .next() o .prev() significará que su html es frágil (cualquier cambio menor romperá el js); una mejor solución sería envolver cada par:
$('[class=adv]').on('input', function(e) { var fullPay = parseInt($(this).closest(".inputgroup").find(".full").val(), 10); var advPay = parseInt($(this).val(), 10); if (advPay > fullPay && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $(this).val(''); } }); .inputgroup { padding:5px 0 5px 0; border-bottom: 1px solid #CCC; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='inputgroup'> <input type="number" name="full" class="full" value="5"> <input type="number" name="adv" class="adv" /> </div> <div class='inputgroup'> <input type="number" name="full" class="full" value="55"> <input type="number" name="adv" class="adv" /> </div> <div class='inputgroup'> <input type="number" name="full" class="full" value="555"> <input type="number" name="adv" class="adv" /> </div>