【发布时间】：2015-08-13 17:12:44
【问题描述】：
我如何从<h:selectBooleanCheckbox> 中引用<h:inputBox>，它们位于<ui:repeat> 和复合组件的一部分中，以便我可以禁用输入框并将其变灰，如下面的屏幕截图所示？
<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
recap：尝试使用复合材料在输入框中禁用和变灰的动态复选框数组，但除非我将代码移出复合材料，否则没有运气。下面是使用复合的代码（与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 复合
<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 复合在我的第一次编辑中显示在上面
如果我将 quantity_checklist 代码上移到 WorkItem.xhtml 文件中，则 ajax 更新有效，并且 Qty 输入框灰显并禁用。但这不适用于复合组件。
编辑 3
见下面的代码...接收电子邮件复选框上的 ajax 更新正确地影响 id ddd 和 poppy 但 qnA.na_value ajax 更新不是这样。换句话说，我在屏幕截图中选中了 Qty 6 旁边的 N/A 复选框，监听器被触发并且我在监听器中设置的 primefaces 消息被显示。但是输入框仍然处于活动状态并且没有变灰。但是，如果我随后切换接收电子邮件复选框，它的侦听器被触发，标题消息出现，AND 屏幕截图中 6 旁边的数量框现在变为灰色并被禁用。
<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>
【问题讨论】：
标签： javascript jsf