I was developing custom ASP.NET page for a SharePoint project, and the page uses SharePoint PeoplePicker control. I needed to manipulate the control on the client side based on the user inputs.

PeoplePicker Picker is a complex control and the difficult bit is that it contains many controls on the page (use the page source viewer to see the HTML tags generated).

So getting into the right bit is tricky and also the default JavaScript functions like, control.disabled; control.focus(); will not work with PeoplePicker control. After some trial and error I came up with the solution to manipulate the control using JavaScript.  Here I am posting the JavaScript code snippet to enable/disable the PeoplePicker Control:

function ToggleDisabledPeoplePicker(element, isDisabled)
{
    try
    {
        element.disabled = isDisabled;
    }
      
    catch(exception)
    {}
      
    if ((element.childNodes) && (element.childNodes.length > 0))
    {
        for (var index = 0; index < element.childNodes.length; index++)
        {
            ToggleDisabledPeoplePicker(element.childNodes[index], isDisabled);
        }
    }
}

// to disable the control
ToggleDisabledPeoplePicker(document.getElementById("<%=txtMRA.ClientID%>"), true);

The script shown below can be used to set focus back to the PeoplePicker control from custom JavaScript validation function:

var found = false;
       
function SetFocusToPeoplePicker(element)
{
    try
    {
        if (element.id.lastIndexOf("upLevelDiv") !=-1)
        {
            element.focus();
            found = true;
            return;
        }
    }
       
    catch(exception)
    {}
       
    if ((element.childNodes) && (element.childNodes.length > 0))
    {
        for (var index = 0; index < element.childNodes.length; index++)
        {
            if (found)
            {
                found = false;
                break;
            }
        
            SetFocusToPeoplePicker(element.childNodes[index]);
        }
    }
}

 - Jignesh