0

Tengo un combobox, y dos botones los nombrare combo1, boton uno y boton dos... lo que quiero hacer es lo siguiente: de inicio el combobox estara activado o visible, el boton dos y tres deberan de mostrarse inhabilitados. cuando se seleccione una o mas opciones del combo uno se debera mostrar habilitado el boton 1 y hasta que se de click en el boton 1 se debera habilitar el boton 2 Este es el codigo hasta el momento Necesito javascript o jquery para agregar la funcionalidad...

  select#combo1(multiple='multiple', style='display: inline-block;margin-left: 10px;')

  button#btn2.btn.btn-primary(type='submit') Boton uno
  button#btn3.btn.btn-primary(type='submit') Boton dos

1 respuesta 1

1

Primero de todo añade a tus botones disabled='disabled'

<button type="submit" class="btn btn-primary" id="btn2" disabled="disabled"></button>
    <button type="submit" class="btn btn-primary" id="btn3" disabled="disabled"></button>

Ahora que ya están bloqueados con jquery puedes utilizar

function activarPrimerBoton() {
  if (!$("#btn2").hasClass("Activo")) {
   $("#btn2").addClass("Activo").prop('disabled', false);
  }
}

$("#combo1").change(function () {
  activarPrimerBoton();
});


$("#btn2").click(function() {
 if ($("#btn2").hasClass("Activo")) {
   $("#btn2").removeClass("Activo").prop('disabled', true);
   $("#btn3").addClass("Activo").prop('disabled', false);
 }
}

activarPrimerBoton es una función que simplemente añade la clase Activo a tu botón con id btn2 si es que ya no estaba activo, esto lo hacemos con hasClass que nos devuelve true si existe y además elimina la caracteristica disabled de tu botón.

Luego indicamos que si el valor de combo1 cambia activaremos la función activarPrimerBoton

Y ya por último le indicamos que si hacemos click en #btn2 y este contiene la clase Activo, borramos su clase Activo, desactivamos el botón y activamos el btn3

Espero que te sirva

1
  • 1
    Muchas gracias, me ha servido de gran manera :]
    – Karime
    Commented el 4 ago. 2018 a las 20:18

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.