h:selectbooleancheckbox click not enabling the next h:selectbooleancheckbox

Question

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:

<h:selectBooleanCheckbox  id="chkbox1" 
value="#{dataTableRow.employeeMBean.displayStatus}"
    onclick="updateDisplayStatus(this);return false;">
<a4j:ajax execute="chkbox1" render="chkbox1, chkbox2"></a4j:ajax>
</h:selectBooleanCheckbox>
<h:selectBooleanCheckbox  id="chkbox2" 
value="#{dataTableRow.employeeMBean.publicStatus}"
    disabled="#{!dataTableRow.employeeMBean.displayStatus}">
</h:selectBooleanCheckbox>

JS:

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";
    }
}

a4j:jsFunction

<a4j:jsFunction name="updatePublicStatusJS" action="#{employeeMBean.updatePublicStatus}"
 render="chkbox2">
<a4j:param name="param1" assignTo="#{dataTableRow.employeeMBean.displayStatus}"/>
</a4j:jsFunction>

There are two problems:

1. The second check box is not getting enabled on clik of the first check box.
2. The action of the a4j:jsFunction is never getting called.

I am not sure why the second checkbox is not enabled. Please let me know if anymore code or explanation is needed.

Thanks in advance.

Answer 1

The root cause: <a4j:jsFunction> was not required. So I removed the onclick and executed the <h:selectBooleanCheckbox> using the <a4j:ajax execute="@this" render="chkbox2"/>. This way check box value gets set as soon I select the fist check box and the second check box is rendered with the updated value (because of the 'render' attribute).