Results 1 to 6 of 6

Thread: Enabling/Disabling Multiple Check Boxes

  1. #1
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Enabling/Disabling Multiple Check Boxes

    Hello Javascript gurus! I have a problem. I have a table that has six rows of which has six checkboxes. Each row of checkboxes has the same name.

    For example, Row 1 names and IDs would be:

    input type=checkbox value="1" name="cat[]"
    input type=checkbox value="2" name="cat[]"
    and so on...
    input type=checkbox value="6" name="cat[]"

    Aside from this, I have a two radio buttons of the same name with values either "Yes" or "No". By default, "No" is the setting and the checkboxes above are disabled, but when the user clicks on "Yes", the checkboxes would become active.

    How would I be able to enable/disable the checkboxes by the radio button trigger?

    Thank you in advance!

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Erm... if I were you, I'd give them all ids, and do it thusly.
    If you use numerically-based ids, you can do it through a for loop:

    HTML Code:
    <script type="text/javascript">
    function disableAllCat() {
    for(i = 1; document.getElementById("catbox" + i) !== null; i++) {
    document.getElementById("catbox" + i).disabled = true;
    }
    }
    
    function enableAllCat() {
    for(i = 1; document.getElementById("catbox" + i) !== null; i++) {
    document.getElementById("catbox" + i).disabled = false;
    }
    }
    
    disableAllCat(); // disable by default
    </script>
    <input type="checkbox" name="cat[]" id="cat1"/>
    <input type="checkbox" name="cat[]" id="cat2"/>
    <input type="checkbox" name="cat[]" id="cat3"/>
    <input type="checkbox" name="cat[]" id="cat4"/>
    <!-- Add more checkboxes here... -->
    
    <input type="radiobutton" onclick="enableAllCat();"/>Yes<br/>
    <input type="radiobutton" onclick="disableAllCat();" checked="1"/>No
    Last edited by Twey; 07-06-2005 at 06:03 PM. Reason: Code typo
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey
    Erm... if I were you, I'd give them all ids [...]
    That's not really necessary, and a bit messy in my opinion:

    Code:
    var form  = ...,
        group = form.elements['cat[]'];
    
    for(var i = 0, n = group.length; i < n; ++i) {
      group[i&#93;.disabled = true;
    }
    and similar for enabling the checkboxes.

    <input type="radiobutton"
    Just 'radio'.

    The nicest way to set the form variable above is to pass it to the function when calling. The code below is generic, but you could hard-code values if you wanted to.

    Code:
    function enableGroup(name, form) {
      var group = form.elements[name];
    
      for(var i = 0, n = group.length; i < n; ++i) {
        group[i&#93;.disabled = false;
      }
    }
    HTML Code:
    <input type="radio" ... onclick="enableGroup('cat[]', this.form);">
    Mike
    Last edited by mwinter; 07-06-2005 at 07:31 PM. Reason: Corrected vB code

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Or, you could do that.
    Of course, I meant to say that. It... was... um... a typo. Yeah.

    Just 'radio'.
    Oops
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hey. it worked! thanks.

  6. #6
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Based on a div?

    Hi Guys,

    I'm in a similiar situation but I'd really like to avoid renaming the form elements (the web framework I'm using will be happier if I don't)..

    How about wrapping the group in a div and using that? I remember writing some code to do this years ago but I remember it being a pain (have to recurse through the DOM looking for form elements).

    Does anyone have some code already written to do that?

    Thanks in advance!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •