5

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?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
user1418018
  • 189
  • 1
  • 4
  • 17

3 Answers3

14

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:

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • This doesn't work for some reason. I still can choose the date on the calendar. I want the field of the calendar be grayed out or non-clickable or something. – user1418018 Dec 07 '13 at 16:04
  • Works for me. Answer is complete and as-is (provided that it's already inside a ``). Apparently you modified it too much in such way that it doesn't work anymore. – BalusC Dec 07 '13 at 18:02
  • Excellent as always BalusC ! – Mariah Feb 12 '15 at 15:51
2

You can have method in your myBean which is a valueChangeListener event.

   private boolean caldisabled;  // with getter and setter

   public void checkSelectedVal(ValueChangeEvent event){

      String selectedVal=event.getNewValue().toString();
      if("NO".equalsIgnoreCase(selectedVal)){
         caldisabled=true;
      } else if("YES".equalsIgnoreCase(selectedVal)){
        caldisabled=false;
      }
}

And in your view in primefaces calendar component set disabled attribute

<h:selectOneRadio value="#{myBean.yesNo}" valueChangeListener="#{mybean.checkSelectedVal}">
    <f:selectItem itemValue="yes" itemLabel="YES" />
    <f:selectItem itemValue="no" itemLabel="NO" />
    <f:ajax event="click" execute="@this" render="mycal"/>
</h:selectOneRadio>

<p:calendar id="mycal" value="#{myBean.date}" disabled="#{myBean.caldisabled}"/>

And there should be another way to do this. I think as this calendar component is Jquery datepicker you should be able to do it using scripting alone with no need to go to bean and make ajax call

Mohamed Ennahdi El Idrissi
  • 2,931
  • 2
  • 19
  • 32
SRy
  • 2,901
  • 8
  • 36
  • 57
0

For me this last solution works fine, but I had to change the event from event="click" to event="change".

Fabio Sartor
  • 99
  • 3
  • This does not provide an answer to the question. You can [search for similar questions](https://stackoverflow.com/search), or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, [ask a new question](https://stackoverflow.com/questions/ask), and include a link to this one to help provide context. See: [Ask questions, get answers, no distractions](https://stackoverflow.com/tour). – Bilal Dec 31 '20 at 11:40