title: h:selectbooleancheckbox click not enabling the next h:selectbooleancheckbox
body: <p>I am using JSF 2.0. I have two check boxes (both are h:selectBooleanCheckBox). The requirement is to enable the second check box on click of the first check box. Here is how the code looks like:</p>
  
  <pre><code>&lt;h:selectBooleanCheckbox  id="chkbox1" 
  value="#{dataTableRow.employeeMBean.displayStatus}"
      onclick="updateDisplayStatus(this);return false;"&gt;
  &lt;a4j:ajax execute="chkbox1" render="chkbox1, chkbox2"&gt;&lt;/a4j:ajax&gt;
  &lt;/h:selectBooleanCheckbox&gt;
  &lt;h:selectBooleanCheckbox  id="chkbox2" 
  value="#{dataTableRow.employeeMBean.publicStatus}"
      disabled="#{!dataTableRow.employeeMBean.displayStatus}"&gt;
  &lt;/h:selectBooleanCheckbox&gt;
  </code></pre>
  
  <h2>JS:</h2>
  
  <pre><code>function updatePublicStatus(obj){   
      var currentValue = obj.checked;
      updatePublicStatusJS(currentValue);
      if(currentValue == true){
          document.getElementById("summaryForm:solutionsTable:"+solnDtIdx+":editPanel:0:chkbox2").disabled = "false";
      }
      else{
          document.getElementById("summaryForm:solutionsTable:"+solnDtIdx+":editPanel:0:chkbox2").disabled = "disabled";
      }
  }
  </code></pre>
  
  <h2>a4j:jsFunction</h2>
  
  <pre><code>&lt;a4j:jsFunction name="updatePublicStatusJS" action="#{employeeMBean.updatePublicStatus}"
   render="chkbox2"&gt;
  &lt;a4j:param name="param1" assignTo="#{dataTableRow.employeeMBean.displayStatus}"/&gt;
  &lt;/a4j:jsFunction&gt;
  </code></pre>
  
  <p>There are two problems:</p>
  
  <ol>
  <li>The second check box is not getting enabled on clik of the first
  check box. </li>
  <li>The action of the <code>a4j:jsFunction</code> is never getting
  called.</li>
  </ol>
  
  <p>I am not sure why the second checkbox is not enabled. 
  Please let me know if anymore code or explanation is needed.</p>
  
  <p>Thanks in advance.</p>