2

Mi idea es para mi formulario recorrer los inputs de tipo number y si el total de estos es superior a la variable faltan entonces deshabilitar los inputs que estén a cero. Al parecer la función funciona hasta cierto punto, pero cuando se trata de deshabilitar inputs no lo hace....

 let faltan = 5;
        let total = 0;
        $('input[type=number]').change(function() {
            console.log('change');
            $('input[type=number]').each(function() {
                console.log($(this).val());
                total = parseInt(total) + parseInt($(this).val());
            });
            if (total >= faltan) {
                $('input[type=number]').each(function() {
                    console.log('disable');
                    if ($(this).val() === 0) {
                        $(this).prop('disabled', true);
                    }
                });
            } else {
                $('input[type=number]').prop('disabled', false);
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input type="number" id="1" value="0"><br>
  <input type="number" id="2" value="0"><br>
  <input type="number" id="3" value="0"><br>
  <input type="number" id="4" value="0"><br>
  <input type="number" id="5" value="0"><br>
  <input type="number" id="6" value="0"><br>
  <input type="number" id="7" value="0"><br>
  <input type="number" id="8" value="0"><br>
  <input type="number" id="9" value="0"><br>
</form>

3 respuestas 3

2

Tu problema esta aca ===

if ($(this).val() === 0) {

Tenes que reemplazarlo por ==

if ($(this).val() == 0) {

Básicamente == hace una conversión de tipos y === no lo hace

Tus $(this).val() tienen como valor '0'

   '0' ==  0     :> True
    0  ==  0     :> True
   '0' == '0'   :> True



  '0' ===  0  :> False
  '0' === '0' :> True
   0  ===  0  :> True
1
  • Puesto que has sido el primero en responder te doy la respuesta a tí, he cambiado el === 0 por === '0' pues necesito que la comprobación sea === gracias
    – Pavlo B.
    el 6 ago. 2018 a las 15:56
2

Estas muy cerca de lo que quieres. Te faltan dos cosas:

  1. Cambia === por == cuando chequeas si el valor es igual a 0.

  2. Las variables faltan y total debes de declarlas dentro del .change(), de otro modo el calculo es incorrecto.

Algo asi:

        $('input[type=number]').change(function() {
            let faltan = 5;
            let total = 0;
            console.log('change');
            $('input[type=number]').each(function() {
                console.log($(this).val());
                total = parseInt(total) + parseInt($(this).val());
            });
            if (total >= faltan) {
                $('input[type=number]').each(function() {
                    console.log('disable');
                    if ($(this).val() == 0) {
                        $(this).prop('disabled', true);
                    }
                });
            } else {
                $('input[type=number]').prop('disabled', false);
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input type="number" id="1" value="0"><br>
  <input type="number" id="2" value="0"><br>
  <input type="number" id="3" value="0"><br>
  <input type="number" id="4" value="0"><br>
  <input type="number" id="5" value="0"><br>
  <input type="number" id="6" value="0"><br>
  <input type="number" id="7" value="0"><br>
  <input type="number" id="8" value="0"><br>
  <input type="number" id="9" value="0"><br>
</form>

1
  • En realidad solo el total lo puse dentro, me di cuenta después de escribir la pregunta
    – Pavlo B.
    el 6 ago. 2018 a las 15:57
0

El valor que quieres darle a la propiedad es disabled = "disabled". Por lo tanto: .prop("disabled", "disabled")

Por otro lado, el valor de un input es un string, por lo que === no está evaluando bien la condición.

Aquí puedes ver un ejemplo funcionando:

let faltan = 5;
        let total = 0;
        $('input[type=number]').change(function() {
            console.log('change');
            $('input[type=number]').each(function() {
                console.log($(this).val());
                total = parseInt(total) + parseInt($(this).val());
                console.log(total);
            });
            if (total >= faltan) {
                $('input[type=number]').each(function() {
                    console.log('disable');
                    if ($(this).val() == 0) {
                        $(this).prop('disabled', "disabled");
                    }
                });
            } else {
                console.log("enable");
                $('input[type=number]').each(function() {
                  $(this).prop('disabled', false);
                });
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  <input type="number" id="1" value="0"><br>
  <input type="number" id="2" value="0"><br>
  <input type="number" id="3" value="0"><br>
  <input type="number" id="4" value="0"><br>
  <input type="number" id="5" value="0"><br>
  <input type="number" id="6" value="0"><br>
  <input type="number" id="7" value="0"><br>
  <input type="number" id="8" value="0"><br>
  <input type="number" id="9" value="0"><br>
</form>

Como último comentario, sospecho que la lógica en esta línea no está bien:

total = parseInt(total) + parseInt($(this).val());

ya que hace que el total siempre aumente, y nunca se vuelven a habilitar los inputs. No sé qué es lo que querés hacer exactamente...

1
  • Además de que total ya es un número, no es necesario hacer la conversión el 6 ago. 2018 a las 15:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.