Question

I have a form with an id of “dialogForm” containing input, textareas and selects.

I would like to make all of the above elements (except the one with id=”Text”) not visible so that the
user cannot see or enter any new data in them.

<textarea class="mceEditor wijmo-wijtextbox ui-widget 
                         ui-state-default ui-corner-all" name="Text" 
id="Text" style="width: 825px;" rows="10" cols="99">test</textarea>

I’d then like to style the above element so it completely fills the form. Can someone give me some pointers as to how I can do this.

Answer 1

To hide just specific form elements, you’ll want something like the following:

$('#dialogForm').find('input[type="text"], select, textarea:not(#text)').hide();

This will ensure that your <textarea id="text" /> element along with other elements (divs and such) aren’t hidden either. If you need to add other elements like checkboxes and such, just append them to the selector list.

Check this jsFiddle.