In real world scenario, we might encounter the following case:
· Disable a Dropdown list in edit mode
How to solve it?
We have the following options:
· Disable using Master Page
· Disable using Client Side Script
For time being, I am using the Disable using Client Side Script option.
Solution Steps: Disable using Client Side Script
Following are the steps involved:
1. Create List
2. Disable Modal Dialog for Edit form
3. Insert disable-script into edit form
4. Test the List
5. Enable back Modal Dialog
Step 1: Create List
Create a List named Products and add a Lookup Column Contact Person pointing to another Contacts list.Products > Contact Person > Contacts
Following is the edit form:
Step 2: Disable Modal Dialog for Edit form
As you know, we only wanted to disable the drop down in edit mode. User should be prevented from changing the Contact Person after item is created.
First we need to disable the dialog box through List > Advanced Settings.
Choose the option No and save changes. Now we are able to edit the page of edit form.
Step 3: Insert disable-script into edit form
Select an item from the Products list & choose Edit option. In the appearing page choose the Site Actions > Edit Page option.
Insert a Content Editor web part, choose edit HTML Content & Insert the following code.
The code is given below:
getControl("select", "Contact Person").disabled = true;
function getControl(type, title)
var controls = document.getElementsByTagName(type);
for (var i=0; i < controls.length; i++)
if (controls[i].title == title)
Click Ok button & Save changes to the page.
Step 4: Test the list
Now try editing an item & you can see the drop down list is disabled.
Step 5: Enable back Modal Dialog
You can enable back the Modal Dialog from List > Advanced Settings.
In this article we have explored how to disable drop down list control in edit form. I hope the knowledge will be useful in real world scenarios.v