How to make people picker read only after populating data in SharePoint Online

Question

I'm using below code to get user and respective manager details from AD.

$(document).ready(function() {
    var userAccountName= $().SPServices.SPGetCurrentUser();
    //Set current logged in user and manager name in people picker
    LoadPeoplePickerDetails();
    //Show the form fields on document.ready()
    $("#onetIDListForm").show();
});

/****************** All function defintions starts here********************************/
//Function to set people picker values
function LoadPeoplePickerDetails() {
    var url=_spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties"
    getReqData(url,function(data){    
        try {
            //Get properties from user profile Json response  
            var userDisplayName = data.d.DisplayName;
            var AccountName = data.d.AccountName;
            $("#tdCurrentUser [id$='upLevelDiv']").html(AccountName);
            $("#tdCurrentUser [id$='checkNames']").click();
            var Manager = data.d.ExtendedManagers.results;
            $("#tdManager [id$='upLevelDiv']").html(Manager[Manager.length-1]);
            $("#tdManager [id$='checkNames']").click();             
        }
        catch(err) {

        }               
    },
    function(data){
        //alert("some error occured in getting current User info");
    });
}

function getReqData(reqUrl,success, failure) {
    $.ajax({
    url: reqUrl, 
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
    success: function (data) {
        success(data);
    },
    error: function (data) {
        failure(data);
    }
    });
}

Answer 1

You'll have to disable the textbox and the icon button, easiest way to do that is in the jquery example in the other stackexchange answer below:

How to make People Picker column Read only in SharePoint 2013

That solution should work for SP Online as well.