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]

Hi David,

Please modify your code below

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' ;

  }

[yundlu316]

Hi Sachin, is the only difference in the code replacing double quotes with single?   If so, I've tried that and it doesn't seem to make a difference.   Thanks!

[sachin_namjoshi]

Sorry, My bad David,

You need to use document.getElementsByName('my_plan')[0].value to get reference field value in UI page client script.

Regards,

Sachin

[yundlu316]

Hey Sachin, I just tried the below code, but it still doesn't work.   Thanks!

if (document.getElementsByName('my_plan')[0].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' ;

  }