Disable taxonomy field and pick list through jQuery

Question

I have a SharePoint 2013 taxonomy field in my site called "Status" and I want to disable it in the new form of the list. Here is what I have done.

var controlHondaStatus = getManagedMetadataField("Status");
controlHondaStatus.children().attr("disabled", "disabled");

function getManagedMetadataField(internalName) {
    var field = findFieldByInternalName(internalName);
    field.Control = field.find("div.ms-taxonomy-fieldeditor");
    field.Value = field.Control.find("span.valid-text").text();
    return field;
}

But with that implementation the text box of the taxonomy field gets disabled but I can still click the pick list and change the value.

Is there a way to disable that pick list, too?

Answer 1

Disabling the image didn't work for me. Replace the image tag with the same markup, so that the OOTB click event handler detached from UI.

var imgNode = $(document.getElementById('name_$containercontrolHolder')).children('img.ms-taxonomy-browser-button').eq(0);
    var s = jQuery("<p>").append(imgNode.clone()).html();
    imgNode.replaceWith(s);

Answer 2

Try below code. It works for me:

<style type="text/css">
.mr-taxonomy-browser-button{ display:none;
}</style>

and then I use this in my code:

$("#IdOfField1").attr('disabled', true).addClass('mr-taxonomy-browser-button'); 

where #IdOfField1 is the ID of the taxonomy field.

Answer 3

//Below is working for both IE and Chrome //Disable text box of the taxonomy field $('div[id="name_$containereditableRegion"]').prop("contenteditable", "false").css('background-color','#F6F6F6');

//Disable Managed Meta Data Browse button var imgNode = $(document.getElementById('name_$containercontrolHolder')).children('img.ms-taxonomy-browser-button').eq(0); var s = jQuery("

").append(imgNode.clone()).html(); imgNode.replaceWith(s);