How to make a conditionally required element un-required based on condition

Question

In my application I have a check box that sets a variable in my controller, and a selectOneMenu that will only render based on the value of said variable. Per @BalusC's answer here I put the same condition in the required attribute because when it's selected, it needs to be required. My issue is that once it's rendered, when I un check the box, the select one menu doesn't go away because it's now also required. Before I added the condition to the required attribute, the select one menu would hide/go away as expected.
xhtml:

<h:panelGroup rendered="#{kaizenEntry.isDealer()}">
    <div class="ui-g-4 ui-lg-3">
        <p:outputLabel value="Is This a Customer Shop Site?" for="shopSiteBox" />
    </div>
    <div class="ui-g-4 ui-lg-3">
        <p:selectBooleanCheckbox id="shopSiteBox" value="#{kaizenEntry.checked}" onchange="waitThenHideModal()" disabled="#{kaizenEntry.disabled}" process="@form">
            <f:ajax render="shopSitePanel" execute="shopSitePanel" />
        </p:selectBooleanCheckbox>
    </div>
    <h:panelGroup id="shopSitePanel" layout="block">
        <div class="ui-g-4 ui-lg-3">
            <p:outputLabel rendered="#{kaizenEntry.checked}" value="Shop Site" for="shopSitesDropdown" />
        </div>
        <div class="ui-g-8 ui-lg-3">
            <p:selectOneMenu rendered="#{kaizenEntry.checked}"
              required="#{kaizenEntry.checked}"
              disabled="#{kaizenEntry.disabled}"
              id="shopSitesDropdown"
              styleClass="categoryClass"
              style="width:150px"
              value="#{kaizenEntry.kaizenMain.shopSite}"
              filter="true"
              filterMatchMode="startsWith">
            <f:selectItem itemLabel="--Select--" itemValue="#{null}"/>
            <f:selectItems value="#{kaizenEntry.shopSiteList}" var="c"
                 itemLabel="#{c.storeNumber} - #{c.addressLine1} - #{c.city} #{c.st}, #{c.zip}"
                 itemValue="#{c.storeNumber} - #{c.addressLine1} - #{c.city} #{c.st}, #{c.zip}" />
            </p:selectOneMenu>
        </div>
    </h:panelGroup>
</h:panelGroup>

Controller:

private boolean checked;
public boolean isChecked() {
    return checked;
}

public void setChecked(boolean checked) {
    this.checked = checked;
}

In short, I am trying to make the select one menu go away when the box is unchecked, like it did before I added the condition to the required attribute, but it won't because it's now required. How can I accomplish this?

What's the code of `waitThenHideModal`? Anyway, you're processing the `selectOneMenu` before the required expression is updated (so the field it's still required), try to redesign your form according your need (e.g. only do an update on `selectBooleanCheckbox` change event) — WoAiNii, Jun 11 '21 at 11:32
`` It's a function that hides a loading indicator "statusDialog" after 5 seconds. I would appear when the box was checked and just spin forever so I made it wait for 5 seconds, then dismiss it. — Justin Dreher, Jun 11 '21 at 12:15
For that you could use also [AjaxFramework Status](http://www.primefaces.org:8080/showcase/ui/ajax/status.xhtml?jfwid=5d8e1) — WoAiNii, Jun 11 '21 at 13:28

score 3 · Accepted Answer · answered Jun 11 '21 at 14:26

Its your execute="shopSitePanel" that is causing the "Required" trigger to happen. For the SelectOne you just want to show or hide the value not to process it also. Change your code to this...

<p:selectBooleanCheckbox id="shopSiteBox" value="#{kaizenEntry.checked}" onchange="waitThenHideModal()" disabled="#{kaizenEntry.disabled}" process="@form">
  <p:ajax update="shopSitePanel" process="@this" />
</p:selectBooleanCheckbox>

How to make a conditionally required element un-required based on condition

1 Answers1