Enabling and disabling components via select checkbox

Question

I have component and I'm trying disable panelGrid below.

<h:selectBooleanCheckbox id="checkboxId" value="#{bean.checked}">
    <p:ajax update="panelId" event="click"/>                                    
</h:selectBooleanCheckbox>
<h:panelGrid id="panelId" rendered="#{!bean.checked}">
    <h:outputLabel>some text</h:outputLabel>
    <h:outputLabel>#registrationBB.registrationModel.homeAddress.actualAddressMathWithRegistration}</h:outputLabel>
</h:panelGrid>

As a result the clicking on checkbox doesn't take no effect. The check indicator doesn't even appear on checkbox component and value bean:checked doesn't sent to the server. I tried to use also. Check indicator appeared but the panel is not refreshed

How to use update via checkbox right?

Answer 1

The example below is what I got to work:

<h:form>
    <h:selectBooleanCheckbox id="checkboxId" value="#{indexBean.checked}" >
        <p:ajax event="change" update="panelId" />
    </h:selectBooleanCheckbox>

    <h:panelGrid id="panelId" style="border:solid 1px black;" >
        <h:outputLabel rendered="#{!indexBean.checked}" >some text</h:outputLabel>
        <h:outputText rendered="#{!indexBean.checked}" value="some text 2" />
    </h:panelGrid>
</h:form>

I had to change the <p:ajax> event from click to change to get the checkbox working. The other issue is if you don't render the <h:panelGrid> the id can not be found to update, so you want to move the rendered attribute to the components inside your <h:panelGrid> but still update the <h:panelGrid>.