Javascript JSF在ui中使用复选框禁用inputbox：在复合组件上重复

如何从

中引用

，它位于

中，并且是复合组件的一部分，以便禁用并灰显输入框，如以下屏幕截图所示

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

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

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

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

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

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

编辑2 重述：尝试使用composites在输入框中获得一个复选框的动态数组以禁用和灰显，但除非我将代码移出composites，否则没有运气。以下是使用复合材料的代码（与以下内容相关）：

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

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>

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

我的

qty#{qAndA.attribute.attribute_id}

被截断为

qty#

，更不用说所有其他的JSF id了，这是因为复合组件是另一个复合组件的子组件，并且这两个组件都是使用

有条件包含的

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

不是。这是因为

#{qAndA}

仅在视图渲染时间而不是视图构建时间可用。

在视图渲染期间运行。如果您使用了

，那么它将按照您预期的方式工作。但是，正如您所指出的，由于受到旧Mojarra 2.1.7的限制，您可能无法使用JSTL以您想要的方式动态构建视图

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

但毕竟，您不需要手动使IDs像那样动态。只需指定一个固定的ID

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

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

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

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

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

否则，如果最初禁用了输入，并且您使用JavaScript重新启用了输入，而没有通知JSF（例如通过

），那么JSF将作为防范黑客请求的一部分，仍然拒绝提交的值。另见

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

---

---

与具体问题无关，您似乎希望使用

呈现HTML

。您是否考虑过改用

？它应该减少一些HTML样板文件。而且，在旧的Mojarra版本中，它有更强大的状态保存功能，而众所周知，

在使用ajax的复杂视图中到处都有bug。

修复方法是在

ui:repeat

上使用

@form

。我觉得既然巴卢斯克在

ui:repeat

bug上给我通风报信，我会接受他的回答，因为这是最有帮助的。但这就是成功的原因

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

<composite:implementation>

  <p:dataTable id="table" value="#{cc.attrs.checklist.answer_attribute_list}" var="qnA">
    <p:column headerText="NA" width="50px;">
      <p:selectBooleanCheckbox value="#{qnA.not_applicable}">
        <p:ajax listener="#{checklistEdit.checkBoxListenerTest}" update="@form" />
      </p:selectBooleanCheckbox>

      <h:outputText value="X" rendered="#{qnA.not_applicable}" />

    </p:column>


    <p:column headerText="Quantity" width="75px;">
       <h:inputText value="#{qnA.quantity}" id="qty" rendered="#{qnA.not_applicable == false}" size="1" />
       <h:outputText value="#{qnA.quantity}" rendered="#{qnA.not_applicable == false}" />

       <h:outputText value="-" rendered="#{qnA.not_applicable}" />

    </p:column>

</p:dataTable>

hmm。该复选框不会影响inputbox，我得到的是“表单组件需要在其祖先中有一个UIForm。建议：将必要的组件包含在其中”，但我确实在CC上有一个包装。我刚刚注意到，如果我在setter上为“#{qAndA.na_value}添加一个调试标记”当我单击复选框时，它从未被调用。我假设这就是为什么inputText从未被禁用，但我不知道为什么setter不会被调用。在浏览器中按F12并检查控制台。有什么线索吗？在迭代过程中，getter被调用为“#{qAndA.na_value}”。但是，当我单击复选框时，是否应该调用setter？如果没有f:ajax，表单是否可以正常工作？如果是这样，这表明您的ui:repeat构造对保存状态的bug很敏感。尝试改用h:dataTable。