3

Tengo el siguiente código que me permite activar o desactivar un campo de texto dependiendo de la opción que se seleccione en el Select:

(document).ready(function() {
        $("#Motivo_TrasladoActivo<?=$ta+1?>").on('change',function()  {
            $("#Motivo_TrasladoActivo<?=$ta+1?> option:selected").each(function () {
                var valor=$(this).val();
                //alert(valor);
                if ($(this).val() === "6") {
                    $("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").prop("disabled", false);
                } else {
                    $("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").prop("disabled", true);
                    $("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").val('');
                }
            });
        });
    });

ahora el detalle es que quiero validar que si han seleccionado la opción 6 que habilita el campo de texto este no vaya vacío, ahora tengo este código que me permite validar que efectivamente el campo no este vacío.

if($("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").val() == ""){
            swal.fire("Si selecciono OTRO MOTIVO favor de completar este campo.","Haga clic en OK para Cerrar","error");
            $("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").focus(); // Esta función coloca el foco en el campo de texto.
            return false;
        }

lo cual me valida digamos correctamente cuando se elige la opción 6, pero ahora el problema es que si regreso el selector a otra opción la que sea no importa cual se seleccione se queda el mensaje de error que no se ha completado el campo. Y solo seleccionando nuevamente la opción 6 y escribiendo algo deja de enviar el mensaje de error.

Me quede sin idea de como resolver esto.

Se agradece cualquier comentario que me ayude a resolver este detalle.

Saludos

Gracias

1 respuesta 1

3

No necesitas un ciclo para recorrer las opciones, cuando haya un cambio en el select, tomas el valor y comparas para habilitar o deshabilitar el otro campo:

$(document).ready(function() {
    $("#Motivo_TrasladoActivo<?=$ta+1?>").on('change', function() {
        // No necesitas un ciclo, tomas directamente el valor
        let valor = $(this).val();
        if ($(this).val() === "6") {
            $("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").prop("disabled", false);
        } else {
            $("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").prop("disabled", true);
            $("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").val('');
        }
    });
});

Luego, para hacer la validación solo revisa que no está deshabilitado:

if($("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").prop('disabled') === false) {
    if($("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").val() == ""){
        swal.fire("Si selecciono OTRO MOTIVO favor de completar este campo.","Haga clic en OK para Cerrar","error");
        $("#Otro_Motivo_TrasladoActivo<?=$ta+1?>").focus(); // Esta función coloca el foco en el campo de texto.
        return false;
    }
}

Podrías usar if(!$(elemento).prop('disabled')) e, incluso, tener las dos condiciones en un solo if, pero dejé el código así solo para que sea más legible.

2
  • :O a que caray ya había intentado eso pero al revés y no me había funcionado, quería validar en la validación que se seleccionara la opción 6 y que no fuera en blanco o vacío el campo de texto pero no me funciono, y ahora asi tal cual lo expresas me funciona correctamente cuando no se ha seleccionado la opcion 6 o retornas de la opcion 6 a otra. Saludos Gracias!!!!
    – Cesarin
    Commented el 6 sept. 2021 a las 19:42
  • ahora a revisar todas las validaciones que tengo :) Buen día!!!. Deja voy a comer... Saludos desde Fresilandia :)
    – Cesarin
    Commented el 6 sept. 2021 a las 19:44

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.