如何在 <h:selectOneMenu> 更改时设置 <p:inputText> 的禁用/只读？

Question

我在其中使用了<p:dataTable>，我使用了html <table>。我想在 <h:selectOneMenu> 更改事件上禁用/只读 PrimeFaces <p:inputText>。

我使用了 JavaScript，但它无法使用它。

<script type="text/javascript">
 function change(val)
 {          
     //alert(val);
     if(val=="Check")
      {

         document.getElementById('bankName').readonly=false;
         document.getElementById('receiptNo').readonly=true;

      }
      if(val=="Cash")
      {

          forms.elements["mainForm:chkNo"].readonly=true;
          document.getElementById('chkNo').readonly=true;
          document.getElementById('bankName').readonly=true;
          document.getElementById('receiptNo').readonly=false;              

      }
}
</script>

JSF 代码

<h:column>
                            <p:dataTable id="paymentHistoryDataTable" var="due" 
                                         >

                                <p:column>
                                    .......

                                    <table id="paymentProcess">
                                        <tr>                                                
                                            <td style="width: 80px;">
                                        <h:selectOneMenu value="#{adminActionController.tempBean.selectType}" id="type" onchange="change(this.value);">
                                            <f:selectItem itemLabel="Check" itemValue="Check"/>
                                            <f:selectItem itemLabel="Cash" itemValue="Cash"/>
                                        </h:selectOneMenu>
                                        </td>
                                        </tr>
                                        <tr id="check">
                                            <td></td>
                                            <td></td>
                                            <td style="width: 90px;" id="lblChk">
                                                <label> <h:outputText value="Check/DD Number:" /> </label>
                                            </td>
                                            <td style="width: 90px;">
                                        <h:inputText id="chkNo" value="#{adminActionController.tempBean.checkNumber}"  immediate="true"
                                                     required="false" validatorMessage="insert Check/DD number">
                                        </h:inputText>
                                        </td>

....... 我想在 js 中访问 id="chkNo" 来禁用它..

Answer 1

您在这里犯了几个概念上的错误。

您的具体问题是由于您正在编写基于 JSF 源代码的 JavaScript 代码。这并不完全正确。 JSF 在网络服务器上运行并生成 HTML。 JavaScript 在 webbrowser 上运行，只能看到 HTML，而不是 JSF。在 webbrowser 中右键单击页面，选择 查看源代码 并仔细查看。不存在 ID 为 bankName 或 receiptNo 的任何 HTML 元素。相反，它是formId:tableId:0:bankName、formId:tableId:1:bankName、formId:tableId:2:bankName 等。原则上，您应该在 JavaScript 中使用这些 HTML 元素 ID 从 HTML DOM 中选择元素。

但这很笨拙。

而是使用 JSF 提供的标签/工具来实现所需的功能需求。您可以在readonly 中使用JSF 表达式语言，例如readonly="#{dropdown.value == 'Cash'}"。您可以使用<f:ajax> 执行JSF ajax 请求来更新模型和视图。

以下启动示例应该为您提供一个很好的起点：

<h:selectOneMenu id="type" value="#{adminActionController.tempBean.selectType}">
    <f:selectItem itemValue="Check"/>
    <f:selectItem itemValue="Cash"/>
    <f:ajax render="chkNo bankName receiptNo" />
</h:selectOneMenu>
<p:inputText id="chkNo" readonly="#{adminActionController.tempBean.selectType == 'Cash'}" />
<p:inputText id="bankName" readonly="#{adminActionController.tempBean.selectType == 'Cash'}" />
<p:inputText id="receiptNo" readonly="#{adminActionController.tempBean.selectType == 'Check'}" />

当下拉列表更改时，<f:ajax> 将更新具有（相对）客户端 ID chkNo、bankName 和 receiptNo 的组件。此更新将强制重新评估 readonly 属性。

---

与具体问题无关，您使用<p:dataTable><table> 的方式（其中您没有将行绑定到var="due"）非常奇怪，但这是未来可能出现的问题/问题的主题.上面的代码示例假定了正确的上下文。