Wednesday, February 1, 2012

Disabling Form Fields

There are times when you want to disable or hide certain form fields or controls in SharePoint. I've found that a little jQuery is your best friend here. You can either disable items by their ID or by using a class.

Put a content editor web part on your page and add the following code...

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// Disable form field/control using ID
$('#btnSubmit :input').attr('disabled','disabled');
// Disable multiple fields/controls using class
$('.disableMe :input').attr('disabled','disabled');
});
</script>

For individual items that you want to disable by ID, go into your customized form using SPD or Fiddler and get the ID's you need.


For multiple items that you want to disable by using class, go into your customized form and make sure to add "disableMe" to the class of the form field's parent table data tag ().

Note: You can't add it to the "SharePoint:FormField" control because it won't take a standard "class" attribute and the "CssClass" attribute won't work here. If you add the class to the parent 'td' tag, the script will apply that class to the first child of that tag.

Here's what you get...


This works in SPD2007 also.

Hope this helps!

CG

(BTW- I know that the form won't do you much good with a disabled submit button and I don't reference any validation or method of enabling the button again. That's a topic for the next post- Form validation using jQuery.)

No comments: