0

Tengo en mi pagina un formulario para agregar un establecimiento y dentro tengo 3 combobox, las opciones de los 3 son SI y NO, el primer Combobox es para preguntar si requiere pago, el segundo es Retribución y el tercero es Retribución no Pecuniaria, lo que estoy intentando hacer es que el segundo y tercer combobox estén siempre deshabilitados y solo se habiliten si en el primer combobox se elija la opcion SI.

Mis combobox son los siguientes:

            <div class="form-group">
            <label for="pago"><i class="fas fa-school"></i> Requiere Pago</label>
            <select class="form-control" name="pago">
            <option value="0" selected>-- SELECCIONE --</option>
            <?php foreach($pagos as $f):?>
            <option value="<?php echo $f->id; ?>"><?php echo $f->nombre_pago; ?></option>
            <?php endforeach; ?>
            </select>
            </div>

            <div class="form-group">
            <label for="pecuniaria"><i class="fas fa-school"></i> Requiere Retribución 
            Pecuniaria</label>
            <select class="form-control" name="pecuniaria" disabled> 
            <option value="0" selected>-- SELECCIONE --</option>
            <?php foreach($pagos as $f):?>
            <option value="<?php echo $f->id; ?>"><?php echo $f->nombre_pago; ?></option>
            <?php endforeach; ?>
            </select>
            </div>

            <div class="form-group">
            <label for="no_pecuniaria"><i class="fas fa-school"></i> Requiere Retribución no 
             Pecuniaria</label>
            <select class="form-control" name="no_pecuniaria">
            <option value="">-- SELECCIONE --</option>
            <?php foreach($pagos as $f):?>
            <option value="<?php echo $f->id; ?>"><?php echo $f->nombre_pago; ?></option>
            <?php endforeach; ?>
            </select>
            </div>

Los OPTION de los combobox los lleno desde una consulta a la BD, esto funciona bien.

Y estoy trabajando con un script que encontre pero no me funciona.

<script>
$("#pago").change(function() {
  if($("#pago").val() !== "0"){
    $('#pecuniaria').prop('disabled', false);
  }
  else
  {
    $('#pecuniaria').prop('disabled', 'disabled');
  }
});
</script>
1
  • Si son para seleccionar entre Si y No, es mas apropiado usar casillas de selección.
    – Sal
    el 6 abr. 2021 a las 0:08

2 respuestas 2

1

Te puedes basar en el índice seleccionado, pasándolo directamente a la función del evento:

function cambio(i){
    ["pecuniaria","no_pecuniaria"].forEach(
        function(name){
            select = document.getElementsByName(name)[0];
            if( i != 1 )
                select.setAttribute("disabled","disabled");
            else
                select.removeAttribute("disabled");
        }
    );    
}
<div class="form-group">
    <label for="pago">
        <i class="fas fa-school"></i>
        Requiere Pago
    </label>
    <select class="form-control" name="pago" onChange="cambio(this.selectedIndex)">
        <option value="0" selected>
            -- SELECCIONE --
        </option>
        <option value="s">SI</option>
        <option value="n">NO</option>
    </select>
</div>
<div class="form-group">
    <label for="pecuniaria">
        <i class="fas fa-school"></i>
        Requiere Retribución Pecuniaria
    </label>
    <select class="form-control" name="pecuniaria" disabled> 
        <option value="0" selected>
            -- SELECCIONE --
        </option>
        <option value="s">SI</option>
        <option value="n">NO</option>
   </select>
</div>
<div class="form-group">
    <label for="no_pecuniaria">
        <i class="fas fa-school"></i> 
        Requiere Retribución no Pecuniaria
    </label>
    <select class="form-control" name="no_pecuniaria" disabled>
        <option value="">
            -- SELECCIONE --
        </option>
        <option value="s">SI</option>
        <option value="n">NO</option>
    </select>
</div>

3
  • Muchas gracias, me funciono pero solo hay algo que me gustaria corregir, al seleccionar NO en requiere pago, tambien deberian desactivarse los otros 2 combobox
    – SBK22
    el 6 abr. 2021 a las 15:12
  • @Jeison: Sólo cambia la condición en el if(). Respuesta actualizada.
    – Sal
    el 6 abr. 2021 a las 17:15
  • Me funciono, muchas gracias..
    – SBK22
    el 6 abr. 2021 a las 17:46
0

Prueba con esto

$('select[name="pago"]').change(function() {

    let selectOption = $( 'select[name="pago"] option:selected' ).val();

    if ( selectOption == 'NO' ) {
        $('select[name="no_pecuniaria"]').attr( 'disabled', 'disabled' );
    } else {
        $('select[name="no_pecuniaria"]').removeAttr('disabled');
    }

});

Lo que hago es obtener el valor de la opción seleccionada con let selectOption = $( 'select[name="pago"] option:selected' ).val(); y lo guardo en la variable selectOption luego simplemente verifico su valor, si es igual a NO entonces agrego el atributo disabled, en caso de no ser así elimino ese atributo.

la función se activo usando .change, es decir, cuando el valor cambia y seleccionado el select basado en un name, también puedes usar una clase o un ID.

Como el valor por defecto asumo es NO recomendaría agregar el atributo disabled en el html por defecto para luego hacer la verificación con js

2
  • Gracias por tu respuesta, pero probé tu código pero aun así no hace nada, consulta, en los combobox hay algo mas que hacer??
    – SBK22
    el 5 abr. 2021 a las 21:30
  • No parece haber error, intenta hacer un console.log( selectOption ); dentro de la función .change para ver que te devuelve la variable el 5 abr. 2021 a las 22:36

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.