4

Need to disable Managed metadata field (the below code disables the textbox of the field but not the button which is used to select the value to the field), Choice field with radio buttons or checkboxes in the newform.aspx/editform.aspx of a list using javascript/jquery.

I'm using the below code, it disable all other fields except the above-mentioned type of fields,

<script type='text/javascript' >
 function disableField () 
{$("[title='fieldName']").attr("disabled", "disabled").css('background-color', '#F6F6F6');
}
_spBodyOnLoadFunctionNames.push("disableField");
</script>
4
$("[title='fieldName']")

Above selector does not match Choice field with radio buttons or checkboxes.

So it's time to dig into the html of newform.aspx/editform.aspx.

Have a look on the following html of choice field.

<table id="Choices_a3f7dc5c-38a9-4aa6-b8dc-d5c786bded0b_MultiChoiceTable" cellpadding="0" cellspacing="1">
   <tbody>
      <tr>
         <td><span class="ms-RadioText" title="Enter Choice #1"><input id="Choices_a3f7dc5c-38a9-4aa6-b8dc-d5c786bded0b_MultiChoiceOption_0" type="checkbox" checked="checked"><label for="Choices_a3f7dc5c-38a9-4aa6-b8dc-d5c786bded0b_MultiChoiceOption_0">Enter Choice #1</label></span></td>
      </tr>
      <tr>
         <td><span class="ms-RadioText" title="Enter Choice #2"><input id="Choices_a3f7dc5c-38a9-4aa6-b8dc-d5c786bded0b_MultiChoiceOption_1" type="checkbox"><label for="Choices_a3f7dc5c-38a9-4aa6-b8dc-d5c786bded0b_MultiChoiceOption_1">Enter Choice #2</label></span></td>
      </tr>
      <tr>
         <td><span class="ms-RadioText" title="Enter Choice #3"><input id="Choices_a3f7dc5c-38a9-4aa6-b8dc-d5c786bded0b_MultiChoiceOption_2" type="checkbox"><label for="Choices_a3f7dc5c-38a9-4aa6-b8dc-d5c786bded0b_MultiChoiceOption_2">Enter Choice #3</label></span></td>
      </tr>
   </tbody>
</table>

So now you can apply following js to disable it.

(function(){
  var allChoices = document.querySelectorAll('input[id^=Choices]');
  [].forEach.call(allChoices, function(node){
    node.disabled = "disabled";
  });
})();

If you wish to use above code, then do not forget to replace Choices by your field name.

See result in JS Bin

For Managed metadata do the same thing. Find html from browser and then write some js to hide them.

  • Thanks, Atish it was really helpful, What about for Managed Metadata field.? – Karthik Jaganathan Dec 11 '15 at 12:10
  • Did not dig into that yet. My suggestion is same. find the html from browser. then write some js to hide. if you stuck, let me know I will help. – Atish Dipongkor - MVP Dec 11 '15 at 12:17
  • Careful this caused side effects for me, the field could not be saved after a save in edit form !!!! – Jeff May 9 '18 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.