0

Tengo una consulta y es la siguiente:

Tengo un formulario con datos cargados en los respectivos input y lo que quiero es que cuando no existan cambios en los input el boton se mantenga deshabilitado pero si existen cambios se habilite el boton.

$(document).ready(function(){
            metodos.CambioInputValor();
        });

        var metodos = function(){
            return{
                CambioInputValor:function(){
                    var inivalNombre = $("#idNombre").val();
                    $("#idNombre").on('input',function(){
                        if ( $("#idNombre").val() != inivalNombre ) {
                            $("#btnActualizar").attr('disabled',false);
                        }else{
                            $("#btnActualizar").attr('disabled',true);
                        }
                    });

                    var inivalEdad = $("#idEdad").val();
                    $("#idEdad").on('input',function(){
                        if ( $("#idEdad").val() != inivalEdad ) {
                            $("#btnActualizar").attr('disabled',false);
                        }else{
                            $("#btnActualizar").attr('disabled',true);
                        }
                    });
                }
            };
        }();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container mb-10">
        <form action="" id="idForm">
            <div class="row col-lg-12">
                <div class="form-group">
                    <label for="idNombre">Nombre</label>
                    <input type="text" id="idNombre" value="Darwin" class="form-control">
                </div>
            </div>
            <div class="row col-lg-12">
                <div class="form-group">
                    <label for="IdEdad">Edad</label>
                    <input type="text" id="idEdad"  value="27" class="form-control">
                </div>
            </div>
            <button type="button" class="btn btn-success" id="btnActualizar">Actualizar</button>
        </form>
    </div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

2
  • Creo que ya lo tienes hecho, solo agrega este atributo a tu etiqueta btnActualizar: disabled = "false"
    – hdmq
    el 4 feb. 2020 a las 20:44
  • El problema es que si hice cambios a los 2 input y luego a uno de ellos lo vuelvo a como esta antes no debería deshabilitarse el boton hasta que ninguno tenga cambios.Solo debería deshabilitarse cuando ninguno haya sufrido cambios.
    – Dum
    el 4 feb. 2020 a las 20:49

1 respuesta 1

2

Prueba lo siguiente:

    var metodos = function(){
        return{
            CambioInputValor:function(){
                var inivalNombre = $("#idNombre").val();
                var inivalEdad = $("#idEdad").val();

                $("#idNombre").on('input',function(){
                    if ( $("#idNombre").val() != inivalNombre || $("#idEdad").val() != inivalEdad) {
                        $("#btnActualizar").attr('disabled',false);
                    }else{
                        $("#btnActualizar").attr('disabled',true);
                    }
                });

                $("#idEdad").on('input',function(){
                    if ( $("#idNombre").val() != inivalNombre || $("#idEdad").val() != inivalEdad) {
                        $("#btnActualizar").attr('disabled',false);
                    }else{
                        $("#btnActualizar").attr('disabled',true);
                    }
                });
            }
        };

<button type="button" class="btn btn-success" disabled = "false" id="btnActualizar">Actualizar</button>
1
  • @Dum, si necesitas algo adicional, me comentas.
    – hdmq
    el 4 feb. 2020 a las 21:09

Tu Respuesta

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

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