jqGrid: How to grey out read only fields on add/ed

I am using jqGrid to maintain a database and need to have certain fields read only on the add/edit form dialog box. I see that jqGrid supports read only fields under editoptions but is it possible to some how "grey-out" read only input boxes so there is a visual cue to let the user know that the field is read only and not editable?

Thanks in advance.

UPDATE Thank you for your fast reply Oleg! I tried what you posted but I'm getting a lot of code warnings in my IDE (Netbeans). Here is my code:

jQuery("#grid").jqGrid('navGrid','#grid_toppager', 
    {
         add:true,
         edit:true,
         view:true, 
         search:false, 
         del:false, 
         refresh:true
    },
    { // Edit form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         viewPagerButtons:false, //disables the arrows to next records
         topinfo:"Fields marked with (*) are required",
         resize:false,
         recreateForm: true,
         beforeShowForm: function ($form) {
             $form.find(".FormElement[readonly]")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
                  .closest(".DataTD")
                  .prev(".CaptionTD")
                  .prop("disabled", true)
                  .addClass("ui-state-disabled")
    },  
    { // Add form
         width:"auto",
         height:"auto",
         top:220,
         left:500,
         topinfo:"Fields marked with (*) are required",
         resize:false,
         reloadAfterSubmit:true,
         closeAfterAdd: true
    },
    { // prmDel

    },

    { // prmSeach

    },

    { //prmView
         top:220,
         left:460
    }

); //jQuery("#grid").jqGrid('navGrid','#grid_toppager'

Also is it possible to change the grey to a slightly darker shade? I need the user to still be able to read it but see and understand the visual cue that it is uneditable. Thanks so much Oleg

You can use beforeShowForm callback to set all readable fields of edit form.

The demo uses the following code

$("#grid").jqGrid("navGrid", "#pager", {},
    {
        recreateForm: true,
        beforeShowForm: function ($form) {
            $form.find(".FormElement[readonly]")
                .prop("disabled", true)
                .addClass("ui-state-disabled")
                .closest(".DataTD")
                .prev(".CaptionTD")
                .prop("disabled", true)
                .addClass("ui-state-disabled");
        },
         // Add dialog options
    },
    {recreateForm: true}
);

It "grey-out" all readonly filed of the Edit form:

You can use of cause no setting of disabled property on the the field and you can use another class as "ui-state-disabled" if you needed. I wanted mostly to show how to select all the fieled which you want to "grey-out".