单击JSF中的第一个复选框时启用第二个复选框

Question

I have 2 checkboxes.The second will be in disable.On clicking of first checkbox the second checkbox will be enabled. Below is my code.

<td>
    <h:selectBooleanCheckbox id="firstDel"
                             value="#{Bean.firstDelIsSelected}">
        <f:ajax event="click"
                listener="#{Bean.addReplacementLine}"
                render="pnlGrp_FirstDel secondDel" execute="pnlGrp_FirstDel firstDel" />
        <h:outputLabel styleClass="fieldLabelText"
                       value="#{message['application.billprogram.admin.manage.label.firstDel']}"/>
    </h:selectBooleanCheckbox>

</td>
<td>
    <h:selectBooleanCheckbox id="secondDel" disabled="#{!Bean.firstDelIsSelected}"
                             value="#{Bean.secDelIsSelected}">
        <f:ajax event="click"
                listener="#{Bean.addReplacementLine}"
                render="pnlGrp_SecondDel" execute="pnlGrp_SecondDel" />
        <h:outputLabel styleClass="fieldLabelText"
                       value="#{message['application.billprogram.admin.manage.label.secDel']}"/>
    </h:selectBooleanCheckbox>
</td>

Now my issue is when I click on first checkbox the secondcheckbox is getting enabled but its changing to text box. Note: On click of checkbox a panel is displayed.