Hide ‘disabled’ options in dropdown menu

4 Views

I’m using a plugin named Composite Products developed by WooThemes / WooCommerce. This plugin allows you to create complex products i.e. if you wanted to buy a twin mattress then you should only be able to choose a twin box spring and twin frame. The problem with this plugin is that it is also showing all of the other available options, but they are disabled (grey). The goal is the hide them entirely.

Thank you for your help.

Read More

Example: http://cl.ly/image/1J2P2Y2s2g0V

Link: http://bit.ly/1paEoMM

Post Views: 4

Related posts

Leave a Reply

4 comments

  1. This will work on all browers, although will only work on IE9 and above:

    select option:disabled {
    display:none;
}

    This will work on all major browsers all the way back to IE7:

    select option[disabled="disabled"]
{ 
    display:none;
}

    Or alternatively, you could use jQuery to target almost all major browsers along with their earlier versions. The following code will loop over all the options and detect if their disabled attribute is in fact ‘disabled’. If it is, it will simply just hide it.

    $('select option').each(function() {
   var thisAttr = $(this).attr('disabled');
   if(thisAttr = "disabled") {
      $(this).hide();
   }
});

  3. I just checked out your site and copied a bit of html to test

    this works: 

    $(function() { 
      // check for options with disabled attribute 
      $('option[disabled="disabled"]').hide(); //then hide them                
});

    using jquery