SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot Rio's Avatar
    Join Date
    Nov 2001
    Location
    United Kingdom
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disabling a multi select box from radio button

    Hi there,

    Does anyone know an easy way to disable a multi-select box like the one below? I've tried the ones I found in this forum and others with no success.

    Is it because I have angle brackets in the form element's name like "enroute[]"?

    Basically I'd like to disable this element when one of the radio button within the form is selected. Any input appreciated

    Cheers.

    Rio

    Code:
    <select name="enroute" class="text_area" size="15" multiple="multiple">
      <option value="ABZ">Aberdeen</option>
      <option value="EDI">Edinburgh</option>
      <option value="CWL">Cardiff</option>
      <option value="GLA">Glasgow</option>
      <option value="SOU">Southampton</option>
      ...
    </select>
    ~~ My website - Can You Chopstick? ~~
    http://www.canyouchopstick.com/

  2. #2
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what have you tried?

    does this not work
    Code:
    <input type='radio' onclick='document.getElementById("sbox").disabled=true;' />
    <select id='sbox' ...

  3. #3
    SitePoint Zealot Rio's Avatar
    Join Date
    Nov 2001
    Location
    United Kingdom
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay... That's how to use getElementbyID. Big thanks to Mr_Money!! (Are you Miss Moneypenny's brother by any chance?)

    Now that brings up another question. Above this select box I have a set of radio button like below.

    HTML Code:
     <input type="radio" name="route" value="0" id="route" />Non Direct
    <input type="radio" name="route" value="1" checked="checked" id="route" />Direct
    What I need to do is disable the select box when an user tick the "Direct" button and possiblly re-set the option of the select box to "0". I've writtern something like below but obviously it's not the right code. How can I achieve this?? I'm quite hopeless with JavaScript

    Code:
    if (document.getElementById("route").value == 1) {
      document.getElementById("sbox").disabled=true;
    }
    ~~ My website - Can You Chopstick? ~~
    http://www.canyouchopstick.com/

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just add the code to the specific radio button

    Code:
     <input type="radio" name="route" value="0" id="route" />Non Direct
    <input type="radio" name="route" value="1" onclick='disableSelect("sbox");' checked="checked" id="route" />
    
    <select id='sbox' ...
    
    <script type='text/javascript'>
    function disableSelect(sID) {
        var sBox = document.getElementById(sID);
        sBox.selectedIndex = 0;
        sBox.disabled = true;
    }
    </script>

  5. #5
    SitePoint Zealot Rio's Avatar
    Join Date
    Nov 2001
    Location
    United Kingdom
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mr_Money,

    Thanks for the script. It works a treat!!
    Now I can have a good sleep this weekend

    Have a nice weekend!

    Rio
    ~~ My website - Can You Chopstick? ~~
    http://www.canyouchopstick.com/


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
  •