Not show disabled option elements?

I am wondering if there is a way to NOT show the disabled elements? And if they we're re-enabled (by javascript/jquery) show th开发者_JAVA百科em?

Wrap it with a span that hides the element. Not pretty, but it works. E.g.

jQuery

$(document).ready(function() {
  $("#togglebutton").click(function(){
    var Element=$("#disableme");

    if (Element.attr("disabled")==false) {
      Element.attr("disabled","disabled").wrap("<span class='hide'></span>");
    } else {
      Element.removeAttr("disabled");
      Element.parent('span.hide').replaceWith(Element.parent('span.hide').html());
    }
  });
});

CSS

.hide {
  display: none;
}

HTML

<input type="text" id="disableme"><br />
<input type="button" id="togglebutton" value="Toggle disable">

Tested on IE 6, IE 8, Firefox 3.6.6, Opera 10.60 and Iron 5.0.380.

In CSS you can do the following.

option[disabled]
{
    display:none;
}

Which should hide options that are disabled, not sure about browser compatibility.

You could do the following in jQuery, assuming you use the proper HTML attibrute for your input tags:

$('input[disabled="disabled"']).hide();

Then just add a show() to your jQuery code that re-enables them.

UPDATE

I failed to reference the question title. The above is a solution for form input tags, not select option tags.