Accessing disabled attribute for PrimeFaces Calendar with JavaScript

Question

I have a form where some fields needs to be disabled until a check box is clicked. For JSF-elements are all working fine. The problem is with the primeface elements.

For a JSF-element like a dropdown list I do it like this:

<h:selectOneMenu value="countryValue" disabled="true" id="countryId">
    <f:selectItems value="countries" />
</h:selectOneMenu>

And for Primefaces-elements, a calender like this:

<p:calendar disabled="true" id="datePicker" value="dateValue" 
         pattern="yyyy-MM-dd" startWeekday="1"    
            timeZone="GMT">  
</p:calendar>

The JavaScript I've used to enable these elements on an event is simple as:

function enableLocationUpdateFilter()
{
    document.getElementById('form:datePicker').disabled = false;
}

The jQuery calling the onchange-event:

 jQuery('.countryCheckBoxId').change(function()
 {
    enableCountryFilter();
 });

By investigating the Primefaces element in firebug I can see that the id "datePicker" only acts as a "span" id and the actual id for the HTML inputfield is "datePicker_input". So, instead by using "datePicker" as an ID in the javascript I tried using "datePicker_input". This enables the field, but the jQuery event bringing up the actual calender does not work.

It also seems that the calender is called through a jquery-event. In this jquery-event you could see that the default disabled is set to true. And I think that is the problem, I can't set that part to false.

amorfis amorfis · Accepted Answer · 2010-09-27T08:04:53

The best I can think of is to make Ajax call on the server, and rerender the calendar. Could you tell us what is triggering this jQuery-onchange event?

And I assume you are using JSF 2.0, right?

UPDATE:

So you want to enable p:calendar when checkBox is clicked. Something similar to this should work:

<h:selectBooleanCheckbox id="countryCheckBoxId" value="#{bean.countryBoolean}">
   <f:ajax render="datePicker"/>
</h:selectBooleanCheckbox>

<p:calendar disabled="#{!bean.countryBoolean}" id="datePicker" value="dateValue" 
        pattern="yyyy-MM-dd" startWeekday="1" timeZone="GMT">     
</p:calendar>

Accessing disabled attribute for PrimeFaces Calendar with JavaScript

2 Answers