making ui reference fields readonly or disabled

[yundlu316]

Hi Experts,

I'm building an UI Page with a couple ui reference fields that I want to make readOnly or disabled unless another field has been checked.   I'm trying to do this with javascript:

if (document.getElementById("my_plan").checked){

  document.getElementById('b_plan_name').readOnly = false;

  document.getElementById('b_plan_name').style.backgroundColor   = '#fff' ;

  } else {

  document.getElementById('b_plan_name').readOnly = true;

  document.getElementById('b_plan_name').style.backgroundColor   = '#ddd' ;

  }

This code seems to work with other input fields but does not work with ui reference fields.   Is there a way to do this?  

Thanks!

[sachin_namjoshi]

If you need to use processing script, then you can use below

var mplan= request.getParameter("my_plan");

Regards,

Sachin

[chirag_bagdai]

Hi David,

I have tried below example, which may be helpful for you :

HTML:

<g:ui_reference name="assigned_to" table="sys_user" />

Client Script:

function setReadOnlyReference(field_name, flag) {
   if(flag == false) 
                   jQuery('#sys_display\\.'+field_name+', #lookup\\.'+field_name+'').removeAttr('disabled');         
     else
                   jQuery('#sys_display\\.'+field_name+', #lookup\\.'+field_name+'').attr('disabled','disabled');
}

For readOnly reference field:

setReadOnlyReference('assigned_to');

For editable :

setReadOnlyReference('assigned_to' , false);

[DonaldBCGS]

disabling field type of ui_reference is tricky.

Assuming a field in HTML section declared as <g:ui_reference name="group" id="group" table="sys_user_group">

You will need to disable three separate elements.

var groupField1 = gel("group");

var groupField2 = gel("sys_display.group");

var groupField3 =gel("lookup.group");

groupField1.disabled = true;

groupField2.disabled = true;

groupField3.disabled = true;

[DonaldBCGS]

If you're going to use this methodology with a ui_reference field then there are three elements you need to disable.
document.getElementById('b_plan_name').disabled=true;
document.getElementById('sys_display.b_plan_name').disabled=true;

document.getElementById('lookup.b_plan_name').disabled=true;