Disable People Picker in List Form (editform.aspx) Using jQuery in Sharepoint 2010

Many times we have a requirement to do some validations on the list forms based upon current login or some other business rule.

In one of my projects I had a similar requirement; I needed to disable the People Picker based on some condition. I tried extensively to disable it but couldn't. Then I found a workaround for it.

A People Picker is the combination of multiple controls.

First I tried to find the textbox associated with this People Picker and disable it. But the disable property didn't work for this textbox. I don't know why it didn't work.

The structure of the People Picker control is like it is creating approximately 11 children control in it. If we see the view source then it will look like as shown below:



Luckily I was having only one People Picker on my editform.aspx page.

To find the People Picker control on the page use:

var control = $("textarea[title='People Picker']")[0];

This will return the People Picker textarea.

After finding this I tried disabling this control, but all in vain.

Then I found a workaround for it.

I read the People Picker control value and added the value in a span and appended the span HTML into the ParentNode container for People Picker control, and hid the People Picker textbox, picker image and address book image.

To read the value of a People Picker control on the page use:

$('.ms-inputuserfield #content').text();

To disable the control I used the following jQuery:

$(document).ready(function () {

 

If(<Add your business rule here>)

{

var isMozilla = $.browser.mozilla;

var control = $("textarea[title='People Picker']")[0];

 

    if (!isMozilla) {

        control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[1].style.display = "none";

    }

    else {

        control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[2].style.display = "none";

    }

    var innerHtml = control.parentNode.parentNode.innerHTML;

    control.parentNode.style.display = "none";

    control.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML = control.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML + "<span class='fieldsTitle'>" + $('.ms-inputuserfield #content').text() + "</span>"

 

}

});

And the result is like this:

Before this jQuery the People Picker was like this:



And after that it looked like this:



In this way I was able to disable a People Picker control in a Sharepoint editform.aspx list form.

Hope it will be a help to you!