Listbox changes textbox to disabled and grey

Discussion in 'Javascript' started by BrendanMcPherson@gmail.com, Aug 29, 2006.

  1. Guest

    How can I get a listbox to change a textbox on some selections.
    I have a listbox which only needs to be filled in on some selections.

    Is there a way I can have on some selections the textbox go
    disabled and turn grey?
     
    , Aug 29, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > How can I get a listbox to change a textbox on some selections.
    > I have a listbox which only needs to be filled in on some selections.
    >
    > Is there a way I can have on some selections the textbox go
    > disabled and turn grey?


    You can disable it, but what it looks like when disabled is up to the
    browser. You may be able to affect the appearance using CSS, but that
    is inconsistent across browsers.

    Here's a quick example:

    <script type="text/javascript">
    function modTextbox()
    {
    document.formA.textA.disabled = !!(document.formA.selA.value%2);
    }
    window.onload = modTextbox;
    </script>
    <form name="formA" action="">
    <div>
    <select id="selA" onchange="modTextbox();">
    <option value="0">0
    <option value="1">1
    <option value="2">2
    <option value="3">3
    </select>
    <br>
    <label for="textA"><input type="text" id="textA">Enable
    only if selection is an even number</label>
    </div>
    </form>


    --
    Rob
     
    RobG, Aug 29, 2006
    #2
    1. Advertising

  3. Guest

    Thanks Rob
    I still dont get it!!!
    do you have an example where the first option is normal
    but second option disables textbox?



    RobG wrote:
    > wrote:
    > > How can I get a listbox to change a textbox on some selections.
    > > I have a listbox which only needs to be filled in on some selections.
    > >
    > > Is there a way I can have on some selections the textbox go
    > > disabled and turn grey?

    >
    > You can disable it, but what it looks like when disabled is up to the
    > browser. You may be able to affect the appearance using CSS, but that
    > is inconsistent across browsers.
    >
    > Here's a quick example:
    >
    > <script type="text/javascript">
    > function modTextbox()
    > {
    > document.formA.textA.disabled = !!(document.formA.selA.value%2);
    > }
    > window.onload = modTextbox;
    > </script>
    > <form name="formA" action="">
    > <div>
    > <select id="selA" onchange="modTextbox();">
    > <option value="0">0
    > <option value="1">1
    > <option value="2">2
    > <option value="3">3
    > </select>
    > <br>
    > <label for="textA"><input type="text" id="textA">Enable
    > only if selection is an even number</label>
    > </div>
    > </form>
    >
    >
    > --
    > Rob
     
    , Aug 29, 2006
    #3
  4. RobG Guest

    wrote:
    > Thanks Rob
    > I still dont get it!!!
    > do you have an example where the first option is normal
    > but second option disables textbox?


    To disable an element that has a disabled attribute (button, input,
    optgroup, option, select, textarea) set its value to true. To enable
    it again, set disabled to false. The basic algorithm is:

    if (condition) {
    elementReference.disabled = true;
    } else {
    elementReference.disabled = false;
    }

    A shorthand method is to set the value of the disabled attribute to the
    outcome of the condition statement:

    elementReference.disabled = (condition);

    That's effectively the same as the above 5 lines of code. The use of
    "!!" in my earlier post was just to make sure that (condition) returned
    true or false, it is probably not needed. Here's another example:

    <form action="">
    <div>
    <select onchange="
    if ( 1 == this.selectedIndex ) {
    this.form.textA.disabled = true;
    } else {
    this.form.textA.disabled = false;
    }
    ">
    <option>Enable input
    <option>Disable input
    </select>
    <input type="text" id="textA">
    </div>
    </form>

    It's possible to get the two out of sync by reloading the page
    (depending on the browser) as the input will probably become enabled
    again but the selected option may not be reset. Hence my use of an
    onload function to make sure they were synchronised.


    --
    Rob
     
    RobG, Aug 29, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AAA
    Replies:
    0
    Views:
    524
  2. Anony!

    How to "grey out" a JButton?

    Anony!, Aug 15, 2004, in forum: Java
    Replies:
    3
    Views:
    826
    zoopy
    Aug 16, 2004
  3. tiewknvc9
    Replies:
    4
    Views:
    864
    tiewknvc9
    Jan 4, 2006
  4. Michael @ SGMS

    ReadOnly (HTML) controls to stay black and not grey

    Michael @ SGMS, Nov 28, 2005, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    443
    Santhi Maadhaven
    Dec 1, 2005
  5. acord

    grey-out/disabled item in listbox

    acord, Mar 11, 2006, in forum: Javascript
    Replies:
    3
    Views:
    265
    acord
    Mar 11, 2006
Loading...

Share This Page