SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    select, if certain option, checkbox is disabled

    I have a select form where if one of the options is selected i would like a checkbox below to become disabled. How can i achieve this?

    TIA

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a similar demo I had:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {fnOldLoad = window.onload;}
    window.onload = function()
    {
      if (window.fnOldLoad) {fnOldLoad();}
      document.forms['form1'].sel1.onchange = selOnChange;
    }
    function selOnChange()
    {
      var f, i, c;
      f = document.forms['form1'];
      i = f.sel1.selectedIndex;
      if (i < 3) c = 1;
      else if (i < 7) c = 2;
      else c = 3;
      f.chk1.disabled = false;
      f.chk2.disabled = false;
      f.chk3.disabled = false;
      f['chk' + c].disabled = true;
    }
    </script>
    </head>
    <body>
    
    <form name='form1' onsubmit='return false'>
    <select name='sel1'>
      <optgroup label='Breakfast'>
        <option>Eggs</option>
        <option>Bagels</option>
        <option>Cereal</option>
      </optgroup>
      <optgroup label='Lunch'>
        <option>Soup</option>
        <option>Fruit</option>
        <option>Salad</option>
        <option>Sandwich</option>
      </optgroup>
      <optgroup label='Dinner'>
        <option>Fish</option>
        <option>Pork</option>
        <option>Steak</option>
        <option>Chicken</option>
        <option>Vegetables</option>
      </optgroup>
    </select>
    <p><input name='chk1' type='checkbox'> Select a Breakfast item and this box is disabled.</p>
    <p><input name='chk2' type='checkbox'> Select a Lunch item and this box is disabled.</p>
    <p><input name='chk3' type='checkbox'> Select a Dinner item and this box is disabled.</p>
    </form>
    
    </body>
    </html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I'm not following though...
    say i have this select:

    <select name="position">
    <option value="top">
    <option value="side">
    <option value="footer">
    </select>
    <input type="checkbox" name="display_name">

    So if i wanted it such that if the use selected top, the checkbox would be disabled...how could i apply your code?

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {fnOldLoad = window.onload;}
    window.onload = function()
    {
      if (window.fnOldLoad) {fnOldLoad();}
      document.forms['form1'].position.onchange = selOnChange;
    }
    function selOnChange()
    {
      var f, i, d = false;
      f = document.forms['form1'];
      i = f.position.selectedIndex;
      if (f.position.options[i].value == 'top') {
        d = true;
      }
      f.display_name.disabled = d;
    }
    </script>
    </head>
    <body>
    
    <form name='form1' onsubmit='return false'>
    
    <select name="position">
    <option value="top">
    <option value="side">
    <option value="footer">
    </select>
    <input type="checkbox" name="display_name">
    
    </form>
    
    </body>
    </html>

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha, ok i get it now

    So if i wanted to expand this to also uncheck the box (using actual form names now)...

    <script type='text/javascript'>
    if (typeof window.onload == 'function') {fnOldLoad = window.onload;}
    window.onload = function()
    {
    if (window.fnOldLoad) {fnOldLoad();}
    document.forms['form1'].editmenulocation.onchange = selOnChange;
    }
    function selOnChange()
    {
    var f, i, c, d = false;
    f = document.forms['form1'];
    i = f.editmenulocation.selectedIndex;
    if (f.editmenulocation.options[i].value == 'top') {
    d = true;
    c = false;
    }
    f.editmenudisplay_name1.disabled = d;
    f.editmenudisplay_name1.checked = c;
    }
    </script>

    Trouble is, i want the checked status to be as it was when the page was generated unless i select 'top' and then it unchecks and disables.

  6. #6
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh and the last thing is...i have this form repeated (php loop) but the form name and the checkbox name incremented...

    form1
    editmenudisplay_name1

    form2
    editmenudisplay_name2

    How can i dynamically set the form name and checkbox name in the js code?

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give us a link to the page so we can see the form.

  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's actually only visible through logged in sessions etc... i have pasted the html produced here:

    URL NOW REMOVED

    (i have hidden the actual domain in this link as i don't want it indexed!)
    Last edited by skyline; Feb 9, 2007 at 18:39. Reason: removed url as no longer works

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did this quickly, but I think it will work ok.

    Code:
    if (typeof window.onload == 'function') {fnOldLoad = window.onload;}
    window.onload = function()
    {
      if (window.fnOldLoad) {fnOldLoad();}
      var i = 1;
      while (init(i++)) {;}
    }
    function init(formNum)
    {
      var f = document.forms['form' + formNum];
      if (!f) return false;
      f.editmenulocation.onchange = selOnChange;
      f.cbInitialState = f['editmenudisplay_name' + formNum].checked;
      f.formNumber = formNum;
      return true;
    }
    function selOnChange()
    {
      var f, i, c, d = false;
      f = this.form;
      c = f.cbInitialState;
      i = f.editmenulocation.selectedIndex;
      if (f.editmenulocation.options[i].value == 'top') {
        d = true;
        c = false;
      }
      f['editmenudisplay_name' + f.formNumber].disabled = d;
      f['editmenudisplay_name' + f.formNumber].checked = c;
    }

  10. #10
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, that works! Thanks...

    If i wanted to add an alternative option that could also have the same effect, how would i do that... ie 'top' OR 'footer' in this part of the code...

    if (f.editmenulocation.options[i].value == 'top') {

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    UK
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually i figured it out:

    Code:
      if (f.editmenulocation.options[i].value == 'top'||f.editmenulocation.options[i].value == 'footer') {
    didn't realise it was the same as php


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
  •