Home / Questions / 364583
Accepted
APRECode
Asked: 2020-06-12 15:11:12 +0800 CST 2020-06-12 15:11:12 +0800 CST

Disable button when not selecting one of two input checkbox

  • 772

I get the button to be enabled by selecting an input checkbox, but now that I have to select the two checkboxes I have to enable the button and when only one checkbox is not selected the button has to be disabled again, I would greatly appreciate your support, colleagues.

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>

javascript

2 Answers

  1. Best Answer

    One solution is to listen to the change event of the respective inputs and check if both are checked, in this case the button is enabled.

        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

  2. You can create two variables for verification:

    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;
  }
});

    And the activation you do after the cycle.

    • 0