How to allow entering information in only 1 input text, jquery?

Question

How to allow entering information in only 1 input text, jquery?

Navigation

#1 by (1 votes)

0

In this way I generate a list dynamically, each record contains an input text with the class cantidad .

$('.listado_facturas > tr').remove();
                   var listado_facturas = $('.listado_facturas');
                     $.each(response.data, function (index, value) {
                        $('<tr/>')
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.TipoDocumento))
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.NumeroDocumento))
                                .append('<div class="numero_documento" style="display:none">' + value.NumeroDocumento + '</div>')
                                .append('<div class="saldo_documento" style="display:none">' + value.Saldo + '</div>')
                                .append('<div class="oriplus_documento" style="display:none">' + value.Oriplus + '</div>')
                            .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.Saldo)))
                            .append($('<td style=" padding-right: 10px; border-right-width: 10px; padding-left: 10px;"/>').addClass('label-cell classCantidad derecha')
                                        .append('<input type="text" style="width: 100%; font-size: 12px;" step="0.01" name="cantidad" class="cantidad" attr-num-doc="' + value.NumeroDocumento + '" min="1" pattern="^[0-9]+" placeholder="Monto">'))
                        .appendTo(listado_facturas);
                    });

Visually it looks like this:

By entering the information in the input text cantidad , I execute the following function.

$('.listado_facturas').on('change', '.cantidad', function(e){
       let  factura = $(this).closest('tr');
       let cantidad_ingresada = factura.find('.cantidad').val().replace(/[^0-9\.]+/g,"");
       let numero_documento = factura.find('.numero_documento').text();
       let oriplus_documento = factura.find('.oriplus_documento').text();
       let saldo_documento = factura.find('.saldo_documento').text();


       console.log("Ingresando cantidad");
       console.log(cantidad_ingresada);
       console.log(saldo_documento);
       if (cantidad_ingresada > saldo_documento){
         myApp.alert("El monto ingresado es mayor que el saldo del documento");
       }
       else{
        factura_seleccionada.NumeroDocumento = numero_documento
        factura_seleccionada.Monto = cantidad_ingresada
        factura_seleccionada.Oriplus = oriplus_documento

        console.log(factura_seleccionada);
       }
    });

Then I must perform a validation that only allows writing in 1 input text, it can be any input text of the list but if the user has already entered 1 he can not enter in other input text, until he deletes the previous one he will be able to enter information in another.

Thank you in advance.

jquery

asked by JG_GJ 22.11.2018 в 18:59

source

1 answer

Error sending an email Calculate difference between 2 JAVA dates [closed]

score 1 · Accepted Answer

I'll give you an example, adapt it to your code as you deem necessary.

//Cuando el DOM esté listo
$(()=>{

//Detectar el teclazo en un input
$(document).on('keyup', 'input',function(){

 //capturar el valor
 let val = $(this).val().trim();
 //Si esta vacio entonces quitamos el disabled a los input
 if( val == '' ){
  $('input').prop('disabled',false);
  
 //Si no esta vacio entonces bloqueamos todos los input exepto este
 }else{
  $('input').not(this).prop('disabled',true);
 }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">