Multi checkboxes when at least one checked enable/disable other inputs

ATTENTION: You are viewing a page formatted for mobile devices; to view the full web page, click HERE.

DonationCoder.com Software > Post New Requests Here

(1/1)

OptimalDesigns:
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="">
<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:
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.

Navigation

[0] Message Index

Go to full version