Button not being enabled after click on checkboxes

Question

So, I have created a table with checkboxes and I want the user to check at least two options in order to enable the button to submit the answers.

HTML

<body>
  <h1>Checked two options</h1>
  <br />
  <p>What are some of your favorite dishes?</p>
  <table id="tblFoods">
    <tr>
      <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td>
    </tr>
    <tr>
      <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td>
    </tr>
    <tr>
      <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td>
    </tr>
    <tr>
      <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td>
    </tr>
  </table>
  <br />
  <input type="submit" id="mybtn" disabled value="Submit" onclick="EnableButton()" />
</body>

And I have this function, but it's not working. I'm using a looping to count how many options have been checked by the user, but it doesn't work.

JS

function EnableButton() {
  var tblFoods = document.getElementById("tblFoods");
  var checkeds = tblFoods.getElementsByTagName("INPUT");

  var counter = 0;

  for (let i = 0; i < marcados.length; i++) {
    if (checkeds[i].checked) {
      counter++;
    }
  }

  if (counter >= 2) {
    document.getElementById("mybtn").disabled = false;
  } else {
    document.getElementById("mybtn").disabled = true;
  }
}

What am I doing wrong?

[https://stackoverflow.com/questions/23730442/perform-click-event-on-disabled-button-using-javascript-or-jquery](https://stackoverflow.com/questions/23730442/perform-click-event-on-disabled-button-using-javascript-or-jquery) — Rob Moll, Nov 06 '21 at 14:30

CertainPerformance · Answer 1 · 2021-11-06T14:46:51.853

You need to check for whether the button needs to be enabled when the inputs get checked, not when the button gets clicked.

The nicest, most concise way to do this is:

const table = document.querySelector('#tblFoods');
table.addEventListener('change', () => {
  const checkedCount = [...table.querySelectorAll('input')].reduce((a, input) => a + input.checked, 0);
  document.getElementById("mybtn").disabled = checkedCount < 2;
});

<h1>Checked two options</h1>
<br/>
<p>What are some of your favorite dishes?</p>
<table id="tblFoods">
  <tr>
    <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td>
  </tr>
  <tr>
    <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td>
  </tr>
  <tr>
    <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td>
  </tr>
  <tr>
    <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td>
  </tr>
</table>
<br />
<input type="submit" id="mybtn" disabled value="Submit" />

Your original code, tweaked, works too, but is pretty verbose in comparison.

document.querySelector('#tblFoods').addEventListener('change', () => {
   var tblFoods = document.getElementById("tblFoods");
   var checkeds = tblFoods.getElementsByTagName("INPUT");

   var counter = 0;

   for(let i =0; i < checkeds.length;i++)
   {
       if(checkeds[i].checked)
       {
        counter++;
       }
   }

   if(counter>=2)
   {
       document.getElementById("mybtn").disabled = false;
   }
   else
   {
       document.getElementById("mybtn").disabled = true;
   }
});

<h1>Checked two options</h1>
<br/>
<p>What are some of your favorite dishes?</p>
<table id="tblFoods">
  <tr>
    <td><input id="chkPizza" type="checkbox" /><label for="chkPizza">Pizza</label></td>
  </tr>
  <tr>
    <td><input id="chkLasagna" type="checkbox" /><label for="chkLasagna">Lasagna</label></td>
  </tr>
  <tr>
    <td><input id="chkPasta" type="checkbox" /><label for="chkPasta">Pasta</label></td>
  </tr>
  <tr>
    <td><input id="chkBarbecue" type="checkbox" /><label for="chkBarbecue">Barbecue</label></td>
  </tr>
</table>
<br />
<input type="submit" id="mybtn" disabled value="Submit" />

I think `reduce`, spread operators etc. might be a bit too tricky for a JS newcomer. — crevulus, Nov 06 '21 at 14:41

Rukshan Jayasekara · Answer 2 · 2021-11-06T14:50:34.160

You have to handle the changes on each checkbox element separately and finally, the submit button. You can do something like the below.

Note: See how the onClick event handlers are used on each input type checkbox element and on the submit button separately. Also, we have to reset everything when submitting.

A possible solution:

let checks_counter = 0;

function EnableButton(checkbox) {
  if (checkbox.checked) {
    checks_counter++;
  }

  if (checks_counter > 2) {
    document.getElementById("mybtn").disabled = false;
  } else {
    document.getElementById("mybtn").disabled = true;
  }
}

function submitHandler() {
  var elements = document.getElementsByTagName('input');
  
  //unchecking everything
  for (var i = elements.length; i--;) {
    if (elements[i].type == 'checkbox') {
      elements[i].checked = false;
    }
  }

  //resetting the counter and disabling the button
  checks_counter = 0;
  document.getElementById("mybtn").disabled = true;
}

<body>
  <h1>Checked two options</h1>
  <br/>
  <p>What are some of your favorite dishes?</p>
  <table id="tblFoods">
    <tr>
      <td><input id="chkPizza" type="checkbox" onChange="EnableButton(this)" /><label for="chkPizza">Pizza</label></td>
    </tr>
    <tr>
      <td><input id="chkLasagna" type="checkbox" onChange="EnableButton(this)" /><label for="chkLasagna">Lasagna</label></td>
    </tr>
    <tr>
      <td><input id="chkPasta" type="checkbox" onChange="EnableButton(this)" /><label for="chkPasta">Pasta</label></td>
    </tr>
    <tr>
      <td><input id="chkBarbecue" type="checkbox" onChange="EnableButton(this)" /><label for="chkBarbecue">Barbecue</label></td>
    </tr>
  </table>
  <br />
  <input type="submit" id="mybtn" disabled value="Submit" onclick="submitHandler()" />

</body>

crevulus · Answer 3 · 2021-11-06T14:40:22.637

You need to call your Enable function when you check boxes. Here's a working example: https://codesandbox.io/s/proud-architecture-ou5l2?file=/src/index.js

using your existing code:

var tblFoods = document.getElementById("tblFoods");
var checkeds = tblFoods.querySelectorAll("input");
const btn = document.getElementById("mybtn");

function enableButton() {
  var counter = 0;

  for (let i = 0; i < checkeds.length; i++) {
    if (checkeds[i].checked) {
      counter++;
    }
  }

  if (counter >= 2) {
    btn.disabled = false;
  } else {
    btn.disabled = true;
  }
}

const handleClick = () => {
  enableButton();
  // do whatever else you need in here
};

checkeds.forEach((box) => box.addEventListener("click", handleClick));

score -1 · Answer 4 · answered Nov 06 '21 at 14:29

You could use something like:

document.querySelectorAll("input[type='checkbox']").forEach(e => e.addEventListener("click", () => {
  const submitButton = document.querySelector("#mybtn");
  if (!submitButton) return;
  
  const checkedInputs = document.querySelectorAll("#tblFoods input[type='checkbox']:checked").length;
  submitButton.disabled = checkedInputs < 2;
}));

In other words, every time a checkbox is clicked, a check is run on how many checkboxes are checked in total. If this amount is greater than or equal to two, the button is enabled, otherwise it is disabled.

score -1 · Accepted Answer · answered Nov 06 '21 at 14:34

You have to run your function when the user select the food, not when the user click the button. A simple solution is removing the onclick event from the button and adding the onchange event in every input:

<h1>Checked two options</h1>
  <br />
  <p>What are some of your favorite dishes?</p>
  <table id="tblFoods">
    <tr>
      <td><input id="chkPizza" type="checkbox" onchange="EnableButton()" /><label for="chkPizza">Pizza</label></td>
    </tr>
    <tr>
      <td><input id="chkLasagna" type="checkbox" onchange="EnableButton()" /><label for="chkLasagna">Lasagna</label>
      </td>
    </tr>
    <tr>
      <td><input id="chkPasta" type="checkbox" onchange="EnableButton()" /><label for="chkPasta">Pasta</label></td>
    </tr>
    <tr>
      <td><input id="chkBarbecue" type="checkbox" onchange="EnableButton()" /><label for="chkBarbecue">Barbecue</label>
      </td>
    </tr>
  </table>
  <br />
  <input type="submit" id="mybtn" disabled value="Submit" />

@crevulus First, the purpose of a function is its reusability. There is no rule against calling it many times. You must know that. Second. the person who made the question is a beginner, so I will not make a complicated algorithm to solve her problem. — Elson Ramos, Nov 06 '21 at 15:06

Button not being enabled after click on checkboxes

5 Answers5