Hello,
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 them?
A:
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.
Jason McCreary
2010-07-09 02:39:21
This won't work cross-browser :)
Nick Craver
2010-07-09 02:51:23
will this work if I use a class selector? They have different classes.
Steven
2010-07-09 03:28:04
@Nick, you sure? If this were CSS you'd be right. I'll have to check. @Steven, yes, simply add your class to the input: `input.yourclass[disabled="disabled"]`
Jason McCreary
2010-07-09 11:48:37
He wants to hide `<option>` elements, not `<input>` you can't hide an `<option>` cross-browser :)
Nick Craver
2010-07-09 11:51:17
@Nick, ahhh. I tend to miss those things when it is only in the question title ;)
Jason McCreary
2010-07-09 12:11:05
A:
In CSS you can do the following.
option[disabled]
{
display:none;
}
Which should hide options that are disabled, not sure about browser compatibility.
Chris Diver
2010-07-09 02:47:11
Same as Jason's this won't work cross-browser, need a different approach for what the OP's after.
Nick Craver
2010-07-09 02:52:07
Well, it depends on what "cross-browser" means. It works IE7+, Firefox 3+, Safari 3+, Chrome, and Opera 9+ - http://kimblim.dk/css-tests/selectors/
Zurahn
2010-07-09 02:54:14
@Zurahn - That isn't true, it's not the `[disabled]` I was referring to, it's the `display: none;` Try it yourself: http://jsfiddle.net/BUNUL/
Nick Craver
2010-07-09 11:54:10
+1
A:
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.
Gert G
2010-07-09 03:31:06