Button not being enabled after click on checkboxes

November 6, 2021

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.

function EnableButton()
{
   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;
   }
}

What am I doing wrong?

>Solution :

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" />