如何設置禁用/只讀 <p:inputText> 在改變 <h:selectOneMenu> ？

Question

我在使用html <table>使用<p:dataTable> <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在Web服務器上運行並生成HTML。 JavaScript在Web瀏覽器上運行，並且只能看到HTML，而不能看到JSF。 右鍵單擊Web瀏覽器中的頁面，選擇“ 查看源代碼”並仔細查看 。 沒有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" ）非常奇怪，但這是將來可能遇到的問題/問題的主題。 上面的代碼示例假定正確的上下文。