通过选择复选框启用和禁用组件

Question

我有一个组件，我正在尝试禁用下面的panelGrid。

<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>

作为结果，点击复选框没有任何效果。检查指示器甚至不会出现在复选框组件上，并且值bean:checked也不会发送到服务器。 我尝试使用<a4j:ajax>，检查指示器出现了，但面板没有刷新。

如何正确使用复选框更新？

- Nawa

---

一次无从预料的尝试：尝试使用 <f:ajax event="click" render="panelId" />。在某些特定情况下，<p:ajax> 不起作用，我相信其中之一是被非 PrimeFaces 组件包装。 - BalusC

你是否在这些组件外面包裹了 h:form 标签？ - Thang Pham

是的，表单存在。 - Nawa

@BalusC 如果我尝试使用 event="click"，则在两种情况下都不会出现检查指示器。 - Nawa

Answer 1

下面的示例是我使用的代码：

<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>

我不得不将 <p:ajax> 事件从 "click" 改成 "change" 才能让复选框工作。另一个问题是如果你不渲染 <h:panelGrid>，则无法找到其ID进行更新，因此您需要将渲染属性移动到 <h:panelGrid> 内部的组件上，但仍要更新 <h:panelGrid>。

- Mark

---

你使用的Primefaces版本是什么？在版本4中无法正常工作，无论复选框是否被选中，panelGrid都不受影响。 - Cenobyte321

@Nab 可能是 3.x 版本。这个问题在 4.0 发布前几年就被提出了。 - Mark

我在5.0中使用自定义jsf组件时遇到了类似的问题，我通过将其包装在面板中并更新面板来解决它。你可以试试这个方法。 - Chris

@MarkRobinson 这就是问题所在。 另一个问题是，如果您不渲染<h:panelGrid>，则无法找到其ID以进行更新，因此您需要将渲染属性移动到<h:panelGrid>内部的组件。 - M. Atif Riaz

Answer 2

稍作变化。你的后台Bean字段不一定要是布尔类型的。如果你有一个带有如下字段的后台Bean：

private List<SelectItem> myStringList;
private String myString;

然后在表单加载之前，您可以像这样初始化myStringList：

myStringList = Arrays.asList(new SelectItem("one", "The Number One"),
                new SelectItem("two", "The number two")
        );

那么你可以这样做：

<h:form>
    <p:selectOneRadio id="ctlSearchType" value="#{mybean.myString}"  layout="grid" columns="3">
       <f:selectItems value="#{mybean.myStringList}" />
       <p:ajax event="change" update="ctlone,ctltwo"/>
    </p:selectOneRadio>

    <h:panelGrid id="panelId" style="border:solid 1px black;" >
       <p:outputLabel for="ctlone" value="Field one:"/>
       <p:inputText value="#{mybean.whatever}" id="ctlone" size="8" maxlength="10" disabled="#{mybean.myString eq 'one'}"/>
       <p:outputLabel for="ctltwo" value="Field two:"/>
       <p:inputText value="#{mybean.whatevertwo}" id="ctltwo" size="8" maxlength="10" disabled="#{mybean.myString eq 'two'}"/>                         
    </h:panelGrid>
</h:form>

- nettie

---

使用“SelectItem”已经不太常见了，因为现在支持普通列表，并且selectOneRadio与selectBooleanCheckbox完全不同。 - Kukeltje