avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • Tuesday June 18, 2024, 10:53 am
  • Proudly celebrating 15+ years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

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


  • Supporting Member
  • Joined in 2018
  • **
  • Posts: 70
  • (retired) Mathematical Engineer
    • View Profile
    • Calculus (level) Problem Solving; Examples & Compiler
    • Read more about this member.
    • Donate to Member
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:

<!DOCTYPE html> <html> <head> </head> <body>
  <form name='calculusclassform' method="post" action="">
      <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>

    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;
</body> </html>


  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 40,906
    • View Profile
    • Mouser's Software Zone on
    • Read more about this member.
    • Donate to Member
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.