title: Accessing disabled attribute for PrimeFaces Calendar with JavaScript
body: <p>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.</p>
  
  <p>For a JSF-element like a dropdown list I do it like this: </p>
  
  <pre><code>&lt;h:selectOneMenu value="countryValue" disabled="true" id="countryId"&gt;
      &lt;f:selectItems value="countries" /&gt;
  &lt;/h:selectOneMenu&gt;
  </code></pre>
  
  <p>And for Primefaces-elements, a calender like this:</p>
  
  <pre><code>&lt;p:calendar disabled="true" id="datePicker" value="dateValue" 
           pattern="yyyy-MM-dd" startWeekday="1"    
              timeZone="GMT"&gt;  
  &lt;/p:calendar&gt;
  </code></pre>
  
  <p>The JavaScript I've used to enable these elements on an event is simple as:</p>
  
  <pre><code>function enableLocationUpdateFilter()
  {
      document.getElementById('form:datePicker').disabled = false;
  }
  </code></pre>
  
  <p>The jQuery calling the onchange-event:</p>
  
  <pre><code> jQuery('.countryCheckBoxId').change(function()
   {
      enableCountryFilter();
   });
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>