我正在使用 <p:dataTable>
在其中我使用了 html <table>
.我想禁用/只读 PrimeFaces <p:inputText>
在 <h:selectOneMenu>
更改事件。
我使用了 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"以禁用它..
最佳答案
您在这里犯了几个概念性错误。
您的具体问题是由于您正在编写基于 JSF 源代码的 JavaScript 代码。这并不完全正确。 JSF 在网络服务器上运行并生成 HTML。 JavaScript 在网络浏览器上运行,只能看到 HTML,而不是 JSF。在网络浏览器中右键单击该页面,选择查看源代码 并仔细查看它。不存在任何 ID 为 bankName
的 HTML 元素或 receiptNo
.相反,它是 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 请求以更新模型和 View 。
以下启动示例应该为您提供一个良好的起点:
<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>
的方式其中您没有将行绑定(bind)到 var="due"
很奇怪,但这是 future 可能出现的问题/问题的主题。上面的代码示例假定了正确的上下文。
关于javascript - 如何设置 <p :inputText> on change of <h:selectOneMenu>? 的禁用/只读,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12436752/