Accessing disabled attribute for Primeface 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.

Possible solution
Since the calendar is called when you press the textfield I tried the following: -Set the calender disabled variable to false. -Set the input text field disabled attribute for the calendar to true. -On change, set the text field disabled attribute to false.

In this way, the disabled attribute for the Calendar is always set to false (meaning it is never disabled) and I only set the text field to disabled in javaScript code on rendering. In this way you can't trigger the calendar and the disabling only goes for the text field and on change I enabling the text field again.

Regards

Answer 1

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>