How to code a field in a UI Page read only?

[dfesenbek]

I have a prompt window from a UI Page where I've added a checkbox to show the user information about another field they've selected on the window.  I coded the client script to populate the checkbox base on the user's selection of the previous field, but I don't want the user to set or change the setting of the checkbox (want it to be read only).  Below shows the HTML code of the checkbox in the UI Page (including readonly="true" which I would think would make the checkbox read only):

    <tr id="standardrow">
        <td><label for="standard">Standard?</label></td>
        <td><g2:ui_checkbox id="standard" name="standard" readonly="true" value="false" /></td>
    </tr>

Below shows the Client script which populates the checkbox (with the 2 commented lines I found in a community post which is supposed to -but doesn't- make the checkbox read only):

function getStd() {
   if (gel('catitem').value != '') {
      var catItem = gel('catitem').value;
      // Get the standard flag
      var gr = new GlideRecord("pc_hardware_cat_item");
      if (gr.get(catItem)) {
         if (gr.u_standard == 'true') {
            gel('ni.standard').checked = true;
         } else {
            gel('ni.standard').checked = false;
         }
      }
   }
   //var ro = gel('ni.standard');
   //ro.readOnly = true;
}

How do I code this checkbox to be read only?  Thanks for any assistance!

[Prasant Kumar 1]

Hi,

Please follow like below code:-

Ui Page Script:-(For a choice list field)

<g:ui_choicelist label="r_object_phase" name="r_object_phase" table="pm_project" field="u_r_object_phase" size="40"/>

With plain javascript (without using gel()):

var element = document.getElementById('r_object_phase');

element.setAttribute('disabled', true);

or

var element = gel('r_object_phase');

element.setAttribute('disabled', true);

If i was able to solve your query, please mark my answer correct and helpful.

Thanks & Regards

Prasant kumar sahu

[Ankur Bawiskar · Accepted solution]

Hi,

please find updated code; just at the start of the UI page add the <script> tag; see screenshot below

<script type="text/javascript">
        $j(document).ready(function(){
        var element = gel('ni.standard');
        element.setAttribute('disabled', true);
        });
  
</script>   

Mark ✅ Correct if this solves your issue and also mark 👍 Helpful if you find my response worthy based on the impact.
Thanks
Ankur