DonationCoder.com forum
 
Read-only archive. This is a static copy of the DonationCoder.com forum. Reading and searching work as before; logging in, posting and private messages do not.
Archive of 2026-10-21 · About this archive · Main site

Author Topic: Multi checkboxes when at least one checked enable/disable other inputs  (Read 3,831 times)

OptimalDesigns

  • (retired) Mathematical Engineer
  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
I have a form with multiple checkboxes.  When at least one is checked or unchecked, need to enable/disable some input elements.  This form is a listing of available classes an individual could sign up for.  If no checked checkbox then show no username, email, nor submit elements;  Otherwise, show these 3 elements.  Here is some code:

Code
<!DOCTYPE html> <html> <head> </head> <body>
  <form name='calculusclassform' method="post" action="">
    <fieldset>
      <legend>Choose your <b>Class</b> interests</legend>
      <input type="checkbox" id="oil" name="interest[]" value="Oil Refinery Optimization" onchange="handleChange();">
      <label for="oil">Oil Refinery Optimization</label>
      <span>Crude oil ...</span>
      <input type="checkbox" id="curvfit" name="interest[]" value="Curve Fitting Data sets" onchange="handleChange();">
      <label for="curvfit">Curve Fitting Data sets</label>
      <span>Have a curve fitting problem? ...</span>
      <input type="checkbox" id="coding" name="interest[]" value="Calculus-level Coding" onchange="handleChange();">
      <label for="coding">Calculus-level Coding</label>
      <span> languages ... </span>
      <h3>Classes are free, but in return, we ask you to share these class offerings with 5+ others.  Thanks.</h3>
      <span>             Name:</span>
      <input type="name" name="username" id="username" disabled><br>
      Email Address:
      <input type="email" name="email" id="email" disabled><br><br>
      <input type="submit" value="Submit" id="submit" disabled>
    </fieldset>
  </form>

  <script>
    function handleChange(cb) {

    var checkboxes = document.getElementByName("interest[]").checked;
    var user = document.getElementById("username");
    var email = document.getElementById("email");
    var submit = document.getElementById("submit");
    
  for (var i = 0; i < checkboxes.length; i++) {
  display("Changed, new value = " + cb.checked);
 //     echo("You did select at least one check box.");
        user.disabled = false;
        email.disabled = false;
        submit.disabled = false;
    else {
 //     echo("You didn't select any check boxes.");
        user.disabled = true;
        email.disabled = true;
        submit.disabled = true; }
}
function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = msg;
  document.body.appendChild(p);
}
  }
  </script>
</body> </html>

mouser

  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 40,931
    • Gathering Badge
    • Plugin Coding Medal
    • Participated in NANY Challenge Seventeen Times
    • Cody Award
    • Coding Snacks
    • Volunteers/Staff
You're on the right track.. Did you get it solved yet?

In handleChange, start by setting a variable like "foundOneChecked" to false.  Loop through all the check boxes and as soon as you find one that's checked you can set that variable to true (and exit the loop).
Then after the loop finishes, check your variable.  If foundOneChecked is not true, then nothing was checked and you can disable or hide the elements.  If it's true then enable them.

Original address: https://www.donationcoder.com/forum/index.php?topic=50179.0