Skip to main content

We need to make certain picklist values greyed out while visible upon selection of other criteria in a form. For instance if you select A you can see 1 2 3 4 5 but 3 4 are greyed out, If you select B then you can see 1 2 3 4 5 but 1,4,5 are greyed out 

Does anyone have a Java snippet that can do this? 


Just thinking that before I’d tackle javascript, I’d try two conditionally-rendered UI-only picklist fields. Then again, I’m going off the top of my head on an unanswered question, and the ui-only approach may be more impossible than javascript.


Could you please elaborate? I would like to try what you are mentioning! 


Not knowing the component you’re using for the form, if you can work with the HTML element, CSS might be the easy solution. You can setup a UI only formula to set a value based on a condition and then reference the field in the style tag. Here’s an example we’re using in a real-time dashboard for color coding cases that have come in within the past 5 minutes:


Formula field (Ticker_Color) logic:


IF({{Age__c}}<=0.002,“#49B4A6”,“#034D70”)


HTML Tag:



{{{Contact.Name}}} (Age:{{Age__c}})

This allows us to use a general look and feel for all records displayed and highlight the records of interest by overriding the color.


Here is some javascript that will build the option list for a UI-Only picklist. It sets 2 items to disabled. Getting this method to work in a table may be a challenge. In a field editor, two conditionally-rendered ui-only fields might do the trick. On Save, you would copy the appropriate ui-only field to the database field. Unfortunately, I don’t have time at the moment to flesh this out further, but the snippet method for populating a picklist may be the crux of the problem, as I didn’t find the “disabled” option defined anywhere.


var arr = r];<br>//= &{value:1,label:1,disabled:true}, ...];<br>arr.push({value:1,label:1});<br>arr.push({value:2,label:2});<br>arr.push({value:3,label:3,disabled:true});<br>arr.push({value:4,label:4,disabled:true});<br>arr.push({value:5,label:5});<br>return arr;