Disable/enable a JSF input component depending on value of another input component

Question

I have two radio buttons:

<h:selectOneRadio value="#{bean.choice}">
    <f:selectItem itemValue="yes" itemLabel="YES" />
    <f:selectItem itemValue="no" itemLabel="NO" />
</h:selectOneRadio>

<p:calendar value="#{bean.date}" />

If the "no" button is selected, the text input field of the calendar should be disabled (greyed out). How can I do this?

Answer 1

Just let the target input component's disabled attribute check the value of the source input and use <f:ajax> in the source component to update the target component. It will cause the disabled attribute to be re-evaluated. No need for a value change listener nor an additional property.

<h:selectOneRadio value="#{bean.choice}">
    <f:selectItem itemValue="yes" itemLabel="YES" />
    <f:selectItem itemValue="no" itemLabel="NO" />
    <f:ajax render="calendar" />
</h:selectOneRadio>

<p:calendar id="calendar" value="#{bean.date}" disabled="#{bean.choice eq 'no'}" />

See also:

• Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
• When to use valueChangeListener or f:ajax listener?