Question

如何引用<h:inputBox> <h:selectBooleanCheckbox>中<ui:repeat>的{{1}}和复合组件的一部分，以便我可以禁用输入框并将其变灰，如图所示以下截图？

<ui:repeat var="qAndA" value="#{cc.attrs.checklist.answer_attribute_list}">
   <td class="chklist"><h:selectBooleanCheckbox  onclick="toggleBox(this, qty_#{qAndA.attribute.attribute_id})" value="#{qAndA.na_value}"> </h:selectBooleanCheckbox></td>
   <td class="chklist"><h:inputText value="#{qAndA.quantity}" id="qty_#{qAndA.attribute.attribute_id}" /></td>

生成此HTML

<input id="j_idt48:2:j_idt94:j_idt94:j_idt167:j_idt171:1:qty_" type="text" name="j_idt48:2:j_idt94:j_idt94:j_idt167:j_idt171:1:qty_" value="6" />

我的qty_#{qAndA.attribute.attribute_id}被截断为qty_

我试过

<h:selectBooleanCheckbox  onclick="toggleBox(this, #{cc.attrs.id}_qty)"  value="#{qAndA.na_value}"></h:selectBooleanCheckbox>
<h:inputText value="#{qAndA.quantity}" size="3" maxlength="3" id="#{cc.attrs.id}_qty"/>

我正在尝试将这个旧的jsp重构为JSF：

原始JSP包括：

<SCRIPT>
   function toggleBox(checkName, quantityName) {
      if(checkName.checked) {
         quantityName.disabled=true;
         quantityName.style.backgroundColor="#808080"; 

      } else {
         quantityName.disabled=false;
         quantityName.style.backgroundColor="#FFFFFF"; 
      }
   }
</SCRIPT>

<c:forEach var="qAndA" items="${checklist.answer_attribute_list}">
<c:choose>
   <c:when test="${empty qAndA.na_value || qAndA.na_value == '0'}">
     <td class="chklist"><input type="checkbox" name="check_<c:out value="${qAndA.attribute_id}" />" onclick="toggleBox(this, qty_<c:out value="${qAndA.attribute_id}" />)" value="1"></td>
     <td class="chklist"><input name="qty_<c:out value="${qAndA.attribute_id}" />" type="text" value="<c:out value="${qAndA.quantity}" />" ></td>
  </c:when>

并生成此HTML

<td class="chklist"><input type="checkbox" name="check_1346788339807" onclick="toggleBox(this, qty_1346788339807)" value="1"></td>
<td class="chklist"><input name="qty_1346788339807" type="text" value="6" size="3" maxlength="3"></td>

修改

quantity_checklist.xhtml复合组件。监听器在checklist.receiving_email上被调用，但不是在它是迭代的一部分时，无论我是使用数据表还是ui：repeat

<p:selectBooleanCheckbox value="#{cc.attrs.checklist.receiving_email}">
    <p:ajax listener="#{checklistEdit.listenerTest()}" />
</p:selectBooleanCheckbox>
<h:dataTable var="qnA" value="#{cc.attrs.checklist.answer_attribute_list}">
    <p:column>
       <p:selectBooleanCheckbox value="#{qnA.na_value}">
      <p:ajax render="qty" listener="#{checklistEdit.listenerTest}" update="@all"/>
   </p:selectBooleanCheckbox>
 </p:column>
 <p:column>
    <h:inputText value="#{qnA.quantity}" id="qty" disabled="#{qnA.na_value}" />
 </p:column>
 </h:dataTable>

编辑2

回顾：试图获得一个动态数组的复选框，使用复合材料在输入框中禁用和灰显，但除非我将代码移出复合材料，否则没有运气。以下是使用复合材料的代码（与How to refactor snippet of old JSP to some JSF equivalent?相关）：

WorkItem.xhtml

<ui:repeat var="actionItem" value="#{workItemController.wfiwi.work_action_list}">

<ui:fragment rendered="#{actionItem.workActionClass.workActionType.action_type_id == '2'}">
     <stk:dynamic_checklist actionItem="#{actionItem}" checklist="#{actionItem.meat}" />
</ui:fragment>

dynamic_checklist.xhtml composite

<ui:fragment rendered="#{cc.attrs.checklist.checkListClass.type == '3'}">
    <stk:quantity_checklist actionItem="#{cc.attrs.actionItem}" checklist="#{cc.attrs.checklist}" />
</ui:fragment>

quantity_checklist.xhtml composite 显示在我的第一个编辑

上方

如果我将quantity_checklist代码移动到WorkItem.xhtml文件中，则ajax更新将起作用，并且数量输入框将显示为灰色并禁用。但是这不能使用复合材料组件。

编辑3

请参阅下面的代码... receive_email复选框上的ajax更新正确影响了ID ddd和poppy，但qnA.na_value ajax更新并未如此。换句话说，我检查屏幕截图中数字6旁边的N / A复选框，监听器触发，并显示我在监听器中设置的primefaces消息。但是输入框仍然是活动的而不是灰色的。但是，如果我然后切换receive_email复选框，则会触发它的侦听器，显示标题消息， AND 屏幕截图中6旁边的QTY框现在变为灰色并被禁用。

<h:panelGroup id="ccc">
    <p:selectBooleanCheckbox value="#{cc.attrs.checklist.receiving_email}">
        <p:ajax listener="#{checklistEdit.listenerTest()}" update="ddd,poppy" />
    </p:selectBooleanCheckbox>
</h:panelGroup>
<h:panelGroup id="ddd">
    <h:outputText value="Email Checkbox:"></h:outputText>
    <h:outputText value="#{cc.attrs.checklist.receiving_email}" />
</h:panelGroup>

<h:dataTable var="qnA" value="#{cc.attrs.checklist.answer_attribute_list}" id="poppy">
    <p:column headerText="NA">
        <p:outputLabel id="navalue" value="#{qnA.na_value}"></p:outputLabel>
    </p:column>
    <p:column headerText="NA Checkbox">
        <p:selectBooleanCheckbox value="#{qnA.na_value}">
            <p:ajax listener="#{checklistEdit.checkBoxListenerTest}" update="poppy" />
        </p:selectBooleanCheckbox>
    </p:column>
    <p:column headerText="Quantity">
        <h:inputText value="#{qnA.quantity}" id="qty" disabled="#{qnA.na_value}" />
    </p:column>
</h:dataTable>

Answer 1

我的qty_#{qAndA.attribute.attribute_id}被截断为qty_，更不用说所有其他JSF ID前置，这是因为复合组件是另一个复合组件的子组件，并且两个组件都有条件地包含在内<ui:fragement>

没有。这是因为#{qAndA}仅在视图渲染时间而不是视图构建时间内可用。 <ui:repeat>在视图渲染时运行。如果您使用过<c:forEach>，那么它就会按预期的方式运行。但是，正如您的previous question所示，您可能因为仅限于旧的Mojarra 2.1.7而不使用JSTL以您想要的方式动态构建视图。

但毕竟，您不需要像这样手动制作ID动态。只需指定固定ID即可。

<h:inputText id="qty" ... />

<ui:repeat>将自动在ID中添加迭代索引。另请参阅How to use EL with <ui:repeat var> in id attribute of a JSF component。

如何引用<h:inputText>中的<h:selectBooleanCheckbox> <ui:repeat>以及~~自定义~~复合组件的一部分，以便我可以禁用并灰显输入框，如以下屏幕截图所示

只需将输入的disabled属性设置为复选框的值，并使用JSF提供的ajax工具在切换复选框时更新输入：

<h:selectBooleanCheckbox value="#{qAndA.na_value}">
    <f:ajax render="qty" />
</h:selectBooleanCheckbox>
...
<h:inputText id="qty" value="#{qAndA.quantity}" disabled="#{qAndA.na_value}" />

不需要额外的JS。对于样式，只需将其放在普通的CSS文件中：

input[disabled] {
    background-color: #808080;
}

否则，如果输入最初被禁用，并且您使用JavaScript重新启用它而没有通知JSF（通过例如<f:ajax>），那么JSF将作为防止被黑客入侵请求的一部分仍然拒绝提交的值。另请参阅How to disable/enable JSF input field in JavaScript?

对具体问题

无关，您似乎想要使用<table>呈现HTML <ui:repeat>。您是否考虑过使用<h:dataTable>？它应该减少一些HTML样板。并且，在旧的Mojarra版本中，它具有更强大的状态保存功能，而<ui:repeat>已知在具有ajax的复杂视图中存在错误。

JSF禁用带有ui复选框的输入框：在复合组件上重复

修改

编辑2

编辑3

1 个答案: