Disable Checkbox array

endiz · #1 09-29-2005, 03:29 PM

Hey guys, im trying to disable a checkbox array when I clock on a certain checkbox, but i can't seem to get the script to work.

Here is the html, I didn't provide the script because its a _very_ big mess.

Thanks guys in advance

Code:

<FORM>

<INPUT TYPE=CHECKBOX NAME="head"   onClick="disable(this.form)">head<P>

<INPUT TYPE=CHECKBOX NAME="headitem[]" VALUE="ip">ip<BR>
<INPUT TYPE=CHECKBOX NAME="headitem[]" VALUE="host">host<BR>
<INPUT TYPE=CHECKBOX NAME="headitem[]" VALUE="name">name<BR>
<INPUT TYPE=CHECKBOX NAME="headitem[]" VALUE="id">id

<P><INPUT TYPE=SUBMIT VALUE="submit">

Charles · #2 09-29-2005, 04:18 PM

Checkboxes require differrent names. Make them unique and then try:

Code:

function disable (f) {
  var e, i = 1;
  while (e = f.elements[i++]) {if (e.type.toLowerCase() == 'checkbox') e.disabled = true}
}

If you really wanted radio buttons then you could use:

Code:

function disable (f) {
  var e, i = 0;
  while (e = f.getElementsByName ('headitem[]')[i++]) {e.disabled = true}
}

Kravvitz · #3 09-29-2005, 04:30 PM

Here's another way.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript"><!--
// IE4+, Firefox, Netscape 6+, Opera 6+
function disable(cbx) {
  if(!cbx) return;
  var frm = cbx.form;
  for(var i=0;i<frm.elements.length;i++) {
    if(frm.elements[i].type && (frm.elements[i] != cbx)) {
      if(frm.elements[i].type.toLowerCase() == 'checkbox') {
        frm.elements[i].disabled = cbx.checked;
      }
    }
  }
}
// -->
</script>
</head>
<body>

<form name="form1" action="">

<input type="checkbox" name="head" onclick="disable(this)">head<br><br>

<input type="checkbox" name="headitem[]" value="ip">ip<br>
<input type="checkbox" name="headitem[]" value="host">host<br>
<input type="checkbox" name="headitem[]" value="name">name<br>
<input type="checkbox" name="headitem[]" value="id">id

<p><input type="submit" value="submit"></p>
</form>

</body>
</html>

Quote:

Originally Posted by Charles

Checkboxes require differrent names.

Why? When named like that, it works fine, at least with a PHP form processor script.

Charles · #4 09-29-2005, 04:48 PM

I stand corrected. Thank you.

From the HTML 4.01 Specification:

Quote:

Several checkboxes in a form may share the same control name. Thus, for example, checkboxes allow users to select several values for the same property.

endiz · #5 09-29-2005, 04:51 PM

thanks Kravvitz, that was exactly what i was looking for.

Any way i could reverse the process? (check enables them, and uncheck disables).

Also, is it possible to make the head an array also?

So lets say, I have multiple forms, but if each *head* is checked, it would enable that certain check box, and pass on with postdata that the header is checked, and each individual box is checked. Sound confusing? hehe, let me explain the whole project.

I'm making a database site, with multiple search critirias. I want to enable each table to be selected within the mysql query, but in order to do that, i have to combine the tables, thus adding the checkbox's into an array.

Basicly it will look something like this.

Head()
1name()
1name()
1name()
1name()

Head()
2name()
2name()
2name()
2name()

Head()
3name()
3name()
3name()
3name().

I realize i went very off track on this post, but I am just l ooking for guidance, I am a PHP\JS beginner, but I seem to be getting the hang of it =)

Thanks guys.

*edit*
after i looked at my post, i realized I'm being very greedy. If its possible to just show me how to reverse the check I would appreciate it.
*edit*

Kravvitz · #6 09-29-2005, 05:16 PM

You're welcome

Quote:

Originally Posted by endiz

Any way i could reverse the process? (check enables them, and uncheck disables).

Change

Code:

frm.elements[i].disabled = cbx.checked;

to

Code:

frm.elements[i].disabled = !cbx.checked;

Quote:

Originally Posted by endiz

Also, is it possible to make the head an array also?

Yes.

endiz · #7 09-29-2005, 05:25 PM

I love you buddy. I wish I could kiss you.

Thank you very much. Much appreciate it. (both arrays work too).

endiz · #8 09-30-2005, 10:17 AM

Hey Krav, few more questions...

What if i have multiple sections per form, and i want to disable each section per head checkbox. I tried to change your code around, but i seemed to just break it.

the form now looks like this.

Code:

<form name="form1">

<input type="checkbox" name="table[]" onclick="disable(this,head)" value="head">head<br><br>

<input type="checkbox" name="headitem[]" value="ip" DISABLED>ip<br>
<input type="checkbox" name="headitem[]" value="host" DISABLED>host<br>
<input type="checkbox" name="headitem[]" value="name" DISABLED>name<br>
<input type="checkbox" name="headitem[]" value="id" DISABLED>id

<input type="checkbox" name="table[]" onclick="disable(this,nva)" value="nva">nva<br><br>

<input type="checkbox" name="headitem[]" value="name" DISABLED>name<br>
<input type="checkbox" name="headitem[]" value="date" DISABLED>date<br>
<input type="checkbox" name="headitem[]" value="analyzed" DISABLED>analyzed<br>
<input type="checkbox" name="headitem[]" value="email" DISABLED>email

<p><input type="submit" value="submit"></p>
</form>

here was your last Javascript

Code:

<script type="text/javascript"><!--
// IE4+, Firefox, Netscape 6+, Opera 6+
function disable(cbx) {
  if(!cbx) return;
  var frm = cbx.form;
  for(var i=0;i<frm.elements.length;i++) {
    if(frm.elements[i].type && (frm.elements[i] != cbx)) {
      if(frm.elements[i].type.toLowerCase() == 'checkbox') {
        frm.elements[i].disabled = !cbx.checked;
      }
    }
  }
}
// -->
</script>

Thanks for all the help.

Charles · #9 09-30-2005, 01:27 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta content="text/css" name="Content-Style-Type">
    <meta content="text/javascript" name="Content-Script-Type">
    <title>Example</title>    

    <script type="text/javascript">
    function toggle (o) {
      var e, i = 0
      while (e = o.parentNode.parentNode.getElementsByTagName ('INPUT')[i++]) {if (e.name == 'headitem[]') e.disabled = o.checked}
    }
    </script>

    <style type="text/css">
      form {width:24em; margin:auto}
      fieldset {margin:1ex; padding:1ex; width:10em}
      label {display:block}
      label.disable {margin-bottom:1em}
      button {display:block; margin:auto}      
    </style>

  </head>  
  <body>
    <form action="some-script.pl">
      <fieldset>

	<legend>Head</legend>

        <label class="disable"><input type="checkbox" name="table[]" onclick="toggle (this)" value="head">Disable</label>

        <label><input type="checkbox" name="headitem[]" value="ip">ip</label>
        <label><input type="checkbox" name="headitem[]" value="host">host</label>
        <label><input type="checkbox" name="headitem[]" value="name">name</label>
        <label><input type="checkbox" name="headitem[]" value="id">id</label>
      </fieldset>
      <fieldset>

	<legend>Nva</legend>

        <label class="disable"><input type="checkbox" name="table[]" onclick="toggle (this)" value="head">Disable</label>

        <label><input type="checkbox" name="headitem[]" value="ip">ip</label>
        <label><input type="checkbox" name="headitem[]" value="host">host</label>
        <label><input type="checkbox" name="headitem[]" value="name">name</label>
        <label><input type="checkbox" name="headitem[]" value="id">id</label>
      </fieldset>

      <div><button type="submit">Button</button></div>
    </form>
  </body>
</html>

endiz · #10 10-04-2005, 09:45 AM

Perfect!
Thanks guys!

endiz · #11 10-04-2005, 11:49 AM

Got another question:
How would I implement another toggle script where it would disable and enable the appropriate textbox assossciated with that checkbox.

Here is my code so far. Thanks guys, I'm learning alot.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta content="text/css" name="Content-Style-Type">
    <meta content="text/javascript" name="Content-Script-Type">
    <title>TEST</title>    

    <script type="text/javascript">
    function toggle (o) {
      var e, i = 0
      while (e = o.parentNode.parentNode.getElementsByTagName ('INPUT')[i++]) {if (e.name == 'headitem[]') e.disabled = !o.checked}
    }
    </script>

    <style type="text/css">
      form {width:24em; margin:auto}
      fieldset {margin:1ex; padding:1ex; width:20em}
      label {display:block}
      label.disable {margin-bottom:1em}
      button {display:block; margin:auto}      
    </style>

  </head>  
  <body>
    <form action="advresult.php">
      <fieldset>

	<legend>Head<input type="checkbox" name="table[]" onclick="toggle (this)" value="head"></legend>


        <label><input type="checkbox" name="headitem[]" value="ip" DISABLED>ip<input type="text" name="query[]" maxlength=25 DISABLED></label>
        <label><input type="checkbox" name="headitem[]" value="host" DISABLED>host<input type="text" name="query[]" maxlength=25 DISABLED></label>
        <label><input type="checkbox" name="headitem[]" value="name" DISABLED>name<input type="text" name="query[]" maxlength=25 DISABLED></label>
        <label><input type="checkbox" name="headitem[]" value="id" DISABLED>id<input type="text" name="query[]" maxlength=25 DISABLED></label>
      </fieldset>
      <fieldset>

	<legend>Nva<input type="checkbox" name="table[]" onclick="toggle (this)" value="NVA"></legend>

        

        <label><input type="checkbox" name="headitem[]" value="name" DISABLED>name<input type="text" name="query[]" maxlength=25 DISABLED></label>
        <label><input type="checkbox" name="headitem[]" value="date" DISABLED>date <input type="text" name="query[]" maxlength=25 DISABLED></label>
        <label><input type="checkbox" name="headitem[]" value="by" DISABLED>by <input type="text" name="query[]" maxlength=25 DISABLED></label>
        <label><input type="checkbox" name="headitem[]" value="analyzed" DISABLED>analyzed <input type="text" name="query[]" maxlength=25 DISABLED></label>
      </fieldset>

      <div><button type="submit">Search</button></div>
    </form>
  </body>
</html>

endiz · #12 10-04-2005, 04:44 PM

Would i use the oncheck event? or still use the onclick event...

Kravvitz · #13 10-04-2005, 04:48 PM

Quote:

Originally Posted by endiz

How would I implement another toggle script where it would disable and enable the appropriate textbox assossciated with that checkbox.

Change the disabled property of the appropriate element. If you showed us an example pair of elements, I could be more specific.

Quote:

Originally Posted by endiz

Would i use the oncheck event? or still use the onclick event...

There is no oncheck event and IE's support for the onchange event on radio buttons and checkboxes is very buggy, so just use onclick.

endiz · #14 10-04-2005, 04:52 PM

I believe this is the pair.

Code:

  <label><input type="checkbox" name="headitem[]" value="ip" DISABLED>ip<input type="text" name="query[]" maxlength=25 DISABLED></label>

Kravvitz · #15 10-04-2005, 05:09 PM

You should not have multiple form controls associated with a single <label>.

Quote:

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

http://www.w3.org/TR/html401/interac...tml#edef-LABEL

Try this. I added the style="display:inline;" because you have the <label>s set to display:block.

Code:

<div><input type="checkbox" name="headitem[]" value="ip"
    onclick="this.parentNode.getElementsByTagName('input')[1].disabled=this.checked;"
    DISABLED><label style="display:inline;">ip<input type="text" name="query[]" maxlength=25 DISABLED></label></div>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)