0

logro que el boton se habilite al seleccionar un input checkbox, pero ahora que tengo que seleccionar los dos checkboks tengo que habilitar el boton y cuando solo un checkbox no este seleccionado el boton tiene que volverse a inhabilitar, agradeceria muchisimo su apoyo compañeros.

const $inputchec = document.querySelector('.form-check-input')
$inputchec.addEventListener('click', function() {
  const seleccion = document.getElementsByName("checkbox");
  for (var i = 0; i < seleccion.length; i++) {
    if (seleccion[i].checked == true) {
      document.getElementById("btnconttaval").disabled = false;
      break;
    } else {
      document.getElementById("btnconttaval").disabled = true;
    }
  }
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-12 form-check my-2">
      <input class="form-check-input" type="checkbox" name="checkbox" id="checkDatos">
      <label class="form-check-label" for="checkDatos">
            checkbox-1
        </label>
    </div>
    <div class="col-md-12 form-check my-3">
      <input class="form-check-input" type="checkbox" name="checkbox" id="checkContrato">
      <label class="form-check-label" for="checkContrato">
            checkbox-2
        </label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 mt-5">
      <button type="button" class="btn btn-warning text-white col-md-3" id="btnconttaval" disabled>Aceptar contrato</button>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

2 respuestas 2

1

Una solución es escuchar el evento change de los respectivos inputs y comprobar si ambos están chequeados, en esta caso se habilita el botón.

    const changeStatusButton = e => {
        document.getElementById("btnconttaval").disabled = document.querySelectorAll(".form-check-input:checked").length == 2 ? false : true;
    }
    document.querySelectorAll(".form-check-input").forEach(check => check.addEventListener("change", changeStatusButton));
1
  • Muchas gracias aberon10 tienes razón, ahora si puedo habilitar el boton al comprobar el checked de ambos, nuevamente gracias por tu apoyo.
    – APRECode
    Commented el 14 jun. 2020 a las 15:14
0

Puedes crear dos variables para verificación:

const $inputchec = document.querySelector('.form-check-input')
$inputchec.addEventListener('click', function() {
  const seleccion = document.getElementsByName("checkbox");
  let verificar = 0;
  let activar = 1;
  for (var i = 0; i < seleccion.length; i++) {
    if (seleccion[i].checked == true && verificar == 0) {
      verificar = 1;
    }
    else if(seleccion[i].checked == true && verificar == 1){
      activar = 0;
    }
  }
  
  if(activar == 1){
    document.getElementById("btnconttaval").disabled = false;
  }
  else{
    document.getElementById("btnconttaval").disabled = true;
  }
});

Y la activación la haces después del ciclo.

1
  • 1
    Gracias por tu respuesta Paulo44, lo he intentado como me sugieres, pero obtengo el mismo resultado. Lo que intento es que al seleccionar los dos checkbox recién se habilite el botón y cuando quite la selección a uno de los checkbox de los dos nuevamente se deshabilite el botón, quiero decir que para que el botón se habilite deben estar seleccionados los dos checkbox. Estaré atento a tu respuesta compañero.
    – APRECode
    Commented el 12 jun. 2020 a las 13:51

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.