Conditionally enable/disable p:selectManyMenu based on h:selectOneRadio value

Question

I am having 2 radio buttons one enable and disable. if i click enable the all selectmanymenu tags should be disabled and vece versa. could you please help me. i have attached the code below.

radio button code:

<div>
    <h:selectOneRadio value="#{userData.data}" layout="pageDirection" id="filterGroup"
     required="true"  styleClass="control-group searchFilterRow searchFilterFont floatL" >
        <f:selectItem itemValue="1" itemLabel="By Part" />
        <f:selectItem itemValue="0" itemLabel="By Filter" />
    </h:selectOneRadio>
    </div> 

    <div class="floatL filterSection">
    <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"
            columnClasses="label, value">

            <p:outputLabel styleClass="disblock" for="display11" value="Vehicle Programs:" />
            <div class="controls">
                <p:selectManyMenu id="display11"
                    value="#{selectManyView.selectedThemes}" converter="themeConverter"
                    var="t" filter="true" filterMatchMode="contains"
                    showCheckbox="true" styleClass="selectManyContainer"  disabled="#{(userData.data==1)}" >
                    <f:selectItems value="#{selectManyView.themes}" var="theme"
                        itemLabel="#{theme.displayName}" itemValue="#{theme}" />

                    <p:column>
                        <h:outputText styleClass="ui-theme ui-theme-#{t.name}" />
                    </p:column>

                    <p:column>
                        <h:outputText value="#{t.displayName}" />
                    </p:column>
                </p:selectManyMenu>
            </div>
        </h:panelGrid>
</div>
        <div class="floatL  filterSection">
        <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5"
            columnClasses="label, value">


            <p:outputLabel for="advanced" value="CSS:" />
            <div class="controls">
                <p:selectManyMenu id="advanced"
                    value="#{selectManyView.selectedThemes}" converter="themeConverter1"
                    var="t" filter="true" filterMatchMode="contains"
                    showCheckbox="true" styleClass="selectManyContainer" disabled="#{(userData.data==1)}"  >
                    <f:selectItems value="#{selectManyView.themes}" var="theme"
                        itemLabel="#{theme.displayName}" itemValue="#{theme}"  />

                    <p:column>
                        <h:outputText styleClass="ui-theme ui-theme-#{t.name}" />
                    </p:column>

                    <p:column>
                        <h:outputText value="#{t.displayName}" />
                    </p:column>
                </p:selectManyMenu>
            </div>
        </h:panelGrid>

        <p:separator />

        </div>

Bean code:

package radioButton;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped

    public class UserData implements Serializable {

        private static final long serialVersionUID = 1L;

        public String data = "1";

        public String getData() {
            return data;
        }

        public void setData(String data) {
            this.data = data;
        }
    }

score 0 · Answer 1 · answered Oct 16 '14 at 09:09

0

You need to add an ajax component to your selectOneRadio to refresh the selectManyMenu's components.

<h:selectOneRadio value="#{userData.data}" layout="pageDirection" id="filterGroup"
 required="true"  styleClass="control-group searchFilterRow searchFilterFont floatL" >
    <f:selectItem itemValue="1" itemLabel="By Part" />
    <f:selectItem itemValue="0" itemLabel="By Filter" />
    <f:ajax render="display11 advanced"/> //id's of the selectManyMenu's
</h:selectOneRadio>

Or use the <p:ajax update="display11 advanced"/> if you intend to switch over to the <p:selectOneRadio> component instead.

answered Oct 16 '14 at 09:09

Emil Kaminski

1,886
2
16
26

Tip: you also can search by jquery-selectors. In this case, it might be usefull to update all `controls`- panels by `update="@(.controls)"` . This will only work with jsf-components like `h:panel....` – Dawn Oct 16 '14 at 09:46
I have tried for it but still i didnt get the solution – Sujith Joseph Oct 16 '14 at 09:52

Conditionally enable/disable p:selectManyMenu based on h:selectOneRadio value

1 Answers1