Help with having Multiple checkboxes unchecked to disable one

questhaven · May 14, 2003

I have a series of checkboxes called share_1, share_2, share_3, etc. There can be multiple number of the above checkboxes (like at least 3 or 4 of each on the same page, but there is no limit as to how many because they are create on the fly). I also have a checkbox called SendEmail. I am trying to figure out a way on the client side to check and see if any of the checkboxes that start with the word share_ are checked, and if none are, then disable the checkbox called SendEmail. Does anyone have an idea on how to do this? I have been searching through past posts and nothing I have found so far seems capable.

Thanks in advance!

shadedecho · May 14, 2003

This works for me in IE5/6. *should* work pretty well in most browsers, though events are very funny cross-browser. may have to toy with it a little. basically, I am taking the approach that the one function, checkforshareboxes() is called at the first instance, with onMouseDown. It handles checking or unchecking the box, and then searches to see if SendEmail should be disabled or not. then, it returns false, and then onMouseUp and onClick both return false, cancelling the event all together, except that you manually handled it in your function. This is the only way I've ever been able to successfully tie into the event sequence on check boxes.

good luck!

Code:

<script language=&quot;javascript&quot;>

function checkforshareboxes(theObj) {
  var theForm = theObj.form;

// manually process the check action, then return false at
// the end of the script so that the event doesn't continue

  if (theObj.checked) theObj.checked = false;
  else theObj.checked = true;

// now search through the whole list of form elements, 
// and see if any have a name with &quot;share&quot; in it. If so,
// check that item to see if it is checked, and if so, 
// set shareboxfound = true so that after the loop, the
// SendEmail element can be re-enabled.

  var shareboxfound = false;

  for (var elementindex in theForm.elements) {
    if (elementindex.indexOf(&quot;share&quot;) >= 0) {
      if (theForm.elements[elementindex].checked) shareboxfound = true;
    }
  }
// if !shareboxfound, uncheck SendEmail
  if (!shareboxfound) theForm.elements['SendEmail'].checked = false;
  theForm.elements['SendEmail'].disabled = !shareboxfound;
  
  return false;
}

</script>

<html>
<form name=&quot;myform&quot;>
<input type=&quot;checkbox&quot; name=&quot;share_1&quot; onMouseDown=&quot;return checkforshareboxes(this);&quot; onMouseUp=&quot;return false;&quot; onClick=&quot;return false;&quot;>Share 1<br>
<input type=&quot;checkbox&quot; name=&quot;share_2&quot; onMouseDown=&quot;return checkforshareboxes(this);&quot; onMouseUp=&quot;return false;&quot; onClick=&quot;return false;&quot;>Share 2<br>
<input type=&quot;checkbox&quot; name=&quot;SendEmail&quot; DISABLED>Send Email
</form>
</html>

dwarfthrower · May 14, 2003

This should get you started:
[tt]<script>
function areChecked(){
var fieldPrefix = 'share_';
var fieldStartNumber = 1;
var shareFieldsFound = 0;
var shareFieldsChecked = 0;
for(i=0; i<document.all.length; i++){
if(document.all.name){
if(document.all.name.indexOf(fieldPrefix) > -1){
shareFieldsFound++;
if(eval('document.all.' + fieldPrefix + fieldStartNumber + '.checked;')){
shareFieldsChecked++;
}
fieldStartNumber++;
}
}
}
alert(shareFieldsFound + ' fields found that match prefix. ' + shareFieldsChecked + ' were checked.');
}
</script>[/tt]

greedyzebra · May 14, 2003

Just for the heck of it, I'll throw in a third option.

<html>
<body>
<script language="javaScript">
function validate()
{
var shares = document.getElementsByName('share');

for (var i=0; i < shares.length; i++)
{
if (shares.checked == true)
{
document.getElementById('submitter').disabled = false;
//Use this to hide the checkbox and its associated
//text entirely
//document.getElementById('subPar').style.display = "none";
return;
}
}

document.getElementById('submitter').disabled = true;

//if you'd rather hide the checkbox and its text altogether
//use this statement
//document.getElementById('subPar').style.display = "none";

}
</script>
<form method="POST">
<input type="checkbox" name="share" id="share_1" value="ON" onclick="validate()"> One</p>
<p><input type="checkbox" name="share" id="share_2"value="ON" onclick="validate()"> Two</p>
<p><input type="checkbox" name="share" id="share_3" value="ON" onclick="validate()"> Three</p>
<p><input type="checkbox" name="share" id="share_4" value="ON" onclick="validate()"> Four</p>
<p id="subPar"><input type="checkbox" name="submitter" id="submitter" value="ON" disabled> send email</p>
</form>
</body>
</html>

Note that when creating your checkboxes (you said they were created dynamically), with this method you should assign them all the same name, but still use "share_1, share_2, share_3, etc" for unique ids/values.

Also, this method checks for checked checkboxes everytime a checkbox is checked and will enable or disable the form submission checkbox as boxes are checked/unchecked (do I get some kind of distinction for creating a sentence with the most instances of the phrase "checked"? ).

I also included a couple of statements that would allow you to completely hide the mechanism to submit the form until at least one of the "share" elements is checked.

Good luck.

shadedecho · May 15, 2003

greedyzebra-
just a note, the approach you took works in a smaller subset of browsers (trust me -- personal experience). The problem is not in how you get at the form elements, thats a good creative approach. The problem is in what ORDER events fire cross-browser.

you rely on "onClick" to fire, and are making the assumption that if no other share check-boxes are checked, and one is "clicked", then this function should not only check that share box but re-enable the "submitter" checkbox. This assumes that onClick is not fired until after the browser has taken care of assigning the "checked" to true to the checkbox in question. In some browsers (and versions), this is true, but in others onClick is fired BEFORE the value is set, so the submitter wouldn't get enabled until after 2 share boxes were checked.

And the reverse is true about unchecking them, since the checked is not set to false until after the onClick, the submitter would never get disabled on the last share box being unchecked.

This is the reason I developed the approach of tying in to the event chain at the first point, onMouseDown. From my experience it appears that nearly across the board, onMouseDown occurs before onMouseUp and onClick (though other events do fire before that, like onFocus, etc). So, I tie in at onMouseDown, take care of checking or unchecking the box, look for whether any share boxes are checked, and if so enable the "submitter", otherwise I disable it. Then, I return false from all 3 event handlers, telling the browser basically "Nevermind, I have already taken care of it" so that the browser doesn't try to check or uncheck the box after we already have. This is the only way in my mind to be sure that i know at the point of an event whether the current state of the "share" checkboxes is correct.

questhaven · May 15, 2003

Hi there - I think I integrate the first solution as it is written above (thank you by the way!) - but I am coming acorss another issue. When I click on of the share check boxes it is disabling the sendEmail checkbox - even if there is another share check box still checked. Then if I check the box that I had unchecked - the sendEmail checkbox is still checked. Here's my code below - if anyone notices anything I would appreciate the feedback!

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<SCRIPT LANGUAGE="JavaScript">

function checkforshareboxes(theObj) {
var theForm = theObj.form;

// manually process the check action, then return false at
// the end of the script so that the event doesn't continue

if (theObj.checked) theObj.checked = false;
else theObj.checked = true;

// now search through the whole list of form elements,
// and see if any have a name with "share" in it. If so,
// check that item to see if it is checked, and if so,
// set shareboxfound = true so that after the loop, the
// SendEmail element can be re-enabled.

var shareboxfound = false;

for (var elementindex in theForm.elements) {
if (elementindex.indexOf("share_&quot

>= 0) {
if (theForm.elements[elementindex].checked) shareboxfound = true;
}
}
// if !shareboxfound, uncheck SendEmail
if (!shareboxfound) theForm.elements['sendEmail'].checked = false;
theForm.elements['sendEmail'].disabled = !shareboxfound;

return false;
}

</script>
</head>

<body style="cursor:default;">

<form name="f1" action="record_share.asp" method="post">

<TABLE border="0" width="100%">
<TR>
<TD valign="bottom">
<TABLE border="0">
<TR>
<TD>
<img border=0 width=64 src="dolimage.asp?i=677&t=0&v=I40&s=0">
</TD>
</TR>
<TR>
<TD align="center">
<INPUT type="checkbox" name="share_id_0" value=I40 checked onMouseDown="return checkforshareboxes(this);" onMouseUp="return false;" onClick="return false;">
</TD>
</TR>
</TABLE>
</TD>
<TD valign="bottom">
<TABLE border="0">
<TR>
<TD>
<img border=0 width=64 src="dolimage.asp?i=677&t=0&v=I51&s=0">
</TD>
</TR>
<TR>
<TD align="center">
<INPUT type="checkbox" name="share_id_0" value=I51 checked onMouseDown="return checkforshareboxes(this);" onMouseUp="return false;" onClick="return false;">
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD colspan="7">
<INPUT type="checkbox" name="sendEmail" value="1">Send notification email regarding shared records.
</TD>
</TR>
<TR>
<TD colspan="7">
<INPUT type="submit" name="submit" value="Share Images">
</TD>
</TR>
</TABLE>
</FORM>

</body>

</html>

shadedecho · May 15, 2003

you named your two checkboxes exactly the same name... change the second one to "share_id_1" and it works!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help with having Multiple checkboxes unchecked to disable one

questhaven

Programmer

shadedecho

Programmer

dwarfthrower

Programmer

greedyzebra

Technical User

shadedecho

Programmer

questhaven

Programmer

shadedecho

Programmer

Similar threads

Part and Inventory Search

Sponsor