JSF:enable second checkbox on clicking of first

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>

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.