Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    193
    Thanks
    147
    Thanked 0 Times in 0 Posts

    Disable Item in a Select (Combo) box

    Hello,

    I can't seem to find for the life of me, anywhere, as to how to disable and grey out an option in a select box.

    Let's say I have the following list:

    [DROP-DOWN MENU] id="fruits"
    Apples
    Oranges
    Bananas
    Mangos
    Strawberries
    Kiwis

    I would like to disable and grey out "Mangos"

    I have the following code, but it doesn't seem to work

    Code:
    document.getElementById('fruits').options['Mangos'].disabled = true
    Any ideas?

    Thanks for all of your help.

    Cheers,

    Jay

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,859
    Thanks
    22
    Thanked 157 Times in 148 Posts
    You could use the <optgroup> tag and style it to look disabled with CSS?...or you could generate a pseudo-select menu with JS/CSS made out of <div> tags and then customize the menu how ever you want it...

    Either way, you'd need to use some JS DOM manipulation and CSS to "enable" the "disabled" optgroup element or div tag...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,859
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Also, you could see if there is a jQuery way to create a pseudo-select element that does what you want: https://www.google.com/search?client...w=1916&bih=915
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,859
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Here you go:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    	<title>TITLE</title>
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){
    			$("#fruits option[value=Mangos]").attr('disabled', true);
    			$("#fruits option[value=Mangos]").css("color", "#aaa");
    		});
    	</script>
    </head>
    <body>
    
    <select id="fruits">
    	<option value="Apples">Apples</option>
    	<option value="Oranges">Oranges</option>
    	<option value="Bananas">Bananas</option>
    	<option value="Mangos">Mangos</option>
    	<option value="Strawberries">Strawberries</option>
    	<option value="Kiwis">Kiwis</option>
    </select>
    
    </body>
    </html>
    jQuery does this for you without using any special kind of UI control....
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • Users who have thanked chump2877 for this post:

    jason_kelly (05-31-2012)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    193
    Thanks
    147
    Thanked 0 Times in 0 Posts
    Awesome!

    Thanks for everyones help.

    Being new to javascript and all, I would like to thank Chump very much for the simple jquery code.

    Works like a charm.

    Again,

    Thanks for everyones time and dedication on this question.

    Cheers and have an awesome evening

    Jay

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Chump's answer doesn't work in MSIE 7 or 8 (might not work in 9, not sure). Options simply can't be disabled in those browsers.

    There's a dirt simple way to do this:
    Code:
    <select onchange="if ( this.options[this.selectedIndex].style.backgroundColor != '') this.selectedIndex = 0;">
    <option value=""> -- choose a fruit -- </option>
    <option> Orange </option>
    <option> Banana </option>
    <option style="background-color: gray; color: lightblue;"> Mango </option>
    <option> Watermelon </option>
    </select>
    It's not really disabled, but you can't choose it.

    Try it!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    chump2877 (05-31-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Chump's answer does work in MSIE 9. Just checked it.

    But you don't need jQuery to do that. Ordinary HTML can do it.

    Code:
    <select>
    	<option value="Apples">Apples</option>
    	<option value="Oranges">Oranges</option>
    	<option value="Bananas">Bananas</option>
    	<option disabled="disabled" style="color: gray;" value="Mangos">Mangos</option>
    	<option value="Strawberries">Strawberries</option>
    	<option value="Kiwis">Kiwis</option>
    </select>
    And if ordinary HTML can do it, any kind of JS can do it, jQuery or simple JavaScript without resorting to jQuery.

    Example:
    Code:
    <select id="fruits">
    	<option value="Apples">Apples</option>
    	<option value="Oranges">Oranges</option>
    	<option value="Bananas">Bananas</option>
    	<option value="Mangos">Mangos</option>
    	<option value="Strawberries">Strawberries</option>
    	<option value="Kiwis">Kiwis</option>
    </select>
    <script type="text/javascript">
    var sel = document.getElementById("fruits");
    var opt = sel.options[3];
    opt.style.color = "gray";
    opt.disabled = true;
    </script>
    If you are using jQuery for other stuff on the page, go with it. But why introduce the overhead of the entire jQuery library for just this one little thing?
    Last edited by Old Pedant; 05-31-2012 at 01:50 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    OLD USING JQUERY!!!!!!!!!!!!!!!!! Did you start getting interested back when I started that thread a few months ago? sorry for interrupting thread.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    No no...I was showing that he did not *NEED* to use jQuery! Imagine dragging in jQuery for such a simple little operation as this?? WHY?

    Read my last comment: *IF* you are already using jQuery for other things on the page, then fine to use it for this. But if the only reason you dragged it in... Ugh.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Pheew!!!!

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Lol!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,859
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Old Pendant, once you start using jQuery more, you'll realize the time it saves us programmers writing javascript code....and the more you use jQuery, the less relevant the loading of the minified, Google-hosted jQuery library is...it's really not an issue...

    So, these days, when I see a JS related-problem, I think to myself: How can I take advantage of a JS framework that is already loaded in my page? Also, once you start using a framework extensively (any framework, really), it's a good habit to try to code things per the framework's way of doing things. It just makes your life easier...

    And if the original poster is not using a JS framework, time to start checking them out! They will save you oodles in development time when used regularly.

    Oh...and to hell with IE7 and IE8! Especially when it comes to what's easier for the developer. (I'm only half-serious, really.) But if you don't need to cater to those browsers, then don't! If you do, then you'll have to settle on a different solution...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Well, actually, you can use a combined solution quite easily that degrades nicely.
    Code:
    <select onchange="if ( this.options[this.selectedIndex].style.backgroundColor != '') this.selectedIndex = 0;">
    
    	<option value="Apples">Apples</option>
    	<option value="Oranges">Oranges</option>
    	<option value="Bananas">Bananas</option>
    	<option disabled="disabled" style="color: gray;" value="Mangos">Mangos</option>
    	<option value="Strawberries">Strawberries</option>
    	<option value="Kiwis">Kiwis</option>
    </select>
    For browser that do support disabled options, that Mangos option will never get selected and so the if test in the onchange will never get triggered.

    But for MSIE 7 and 8, where the disabled is ignored, the if test provides a fallback.

    (This all works however you apply the disabled and color to the option, in HTML, plain JS, or jQuery.)

    And I stand by my answer: *IF* you only included jQuery for this one purpose on the page, I wouldn't have done it. But that is a big "IF".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,859
    Thanks
    22
    Thanked 157 Times in 148 Posts
    What's really tragic is that XP users can't upgrade to IE9. So you still have to take into serious consideration previous versions of IE (depending on your target audience) when writing your code...

    On the upside, I read somewhere that a study now ranked browsers as follows, in order of popularity:

    1) Chrome
    2) Firefox
    3) IE

    So hopefully IE will eventually die a quiet death, and we can all move on to happier days!
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Quote Originally Posted by chump2877 View Post
    So hopefully IE will eventually die a quiet death, and we can all move on to happier days!
    Amen. At a minimum, all but IE 9 will, one can presume.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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