How to disable client side people picker using JQuery in SharePoint 2013 | SharePoint Online

Problem

I had created SharePoint people picker using the example from msdn in my aspx page. I had to disable people picker through JQuery in order to full fill my client’s requirement.

Solution

According to above mentioned msdn post people picker is initiated on.

  <div id="peoplePickerDiv"></div>

So the id of the div is peoplePickerDiv. So with that I will show the solution.

Step 1:

Create an object of people picker.

  var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

Step 02:

Set Enable state to fasle.

peoplePicker.SetEnabledState(false);

This will disable the people picker. But you can remove the people objects with X sign. So in Step three we have to remove X.

Step 03:

Remove the X image.

$('#peoplePickerDiv_TopSpan_ResolvedList').find('.sp-peoplepicker-delImage').hide();

Conclusion

Now the people picker is disabled.