javascript 如何在 <h:selectOneMenu> 更改时设置 <p:inputText> 的禁用/只读？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12436752/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set disable/readonly of <p:inputText> on change of <h:selectOneMenu>?
提问by V.Rohan
I am using <p:dataTable>within that I used html <table>. I want to disable/readonly PrimeFaces <p:inputText>on <h:selectOneMenu>change event.
我正在使用<p:dataTable>我使用的 html <table>。我想<p:inputText>在<h:selectOneMenu>更改事件时禁用/只读 PrimeFaces 。
I used JavaScript, but it is not working with it.
我使用了 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 Code
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>
................ I want to access id="chkNo" in js for disable it..
................我想访问 id="chkNo" 在 js 中禁用它..
回答by BalusC
You're making several conceptual mistakes here.
你在这里犯了几个概念上的错误。
Your concrete problem is caused by that you're writing JavaScript code based on the JSF source code. This is not entirely right. JSF runs on webserver and produces HTML. JavaScript runs on webbrowser and sees HTML only, not JSF. Rightclick the page in webbrowser, choose View Sourceand look closely at it. There doesn't exist any HTML elements with ID bankNameor receiptNo. Instead, it are formId:tableId:0:bankName, formId:tableId:1:bankName, formId:tableId:2:bankName, etc. In principle, you should have used exactly those HTML element IDs in JavaScript to select elements from the HTML DOM.
您的具体问题是由您根据 JSF 源代码编写 JavaScript 代码引起的。这并不完全正确。JSF 在网络服务器上运行并生成 HTML。JavaScript 在网络浏览器上运行，只能看到 HTML，而不是 JSF。在 webbrowser 中右键单击页面，选择View Source并仔细查看它。不存在任何带有 IDbankName或receiptNo. 相反，它是formId:tableId:0:bankName、formId:tableId:1:bankName、formId:tableId:2:bankName等。原则上，您应该完全使用 JavaScript 中的那些 HTML 元素 ID 从 HTML DOM 中选择元素。
But this is clumsy.
但这很笨拙。
Rather use JSF-provided tags/facilities to achieve the desired functional requirement. You can use JSF expression language in readonlysuch as readonly="#{dropdown.value == 'Cash'}". You can use <f:ajax>to execute a JSF ajax request to update the model and the view.
而是使用 JSF 提供的标签/工具来实现所需的功能需求。您可以在readonly诸如readonly="#{dropdown.value == 'Cash'}". 您可以使用<f:ajax>执行 JSF ajax 请求来更新模型和视图。
The following kickoff example should give you a good starting point:
以下启动示例应该为您提供一个很好的起点：
<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'}" />
The <f:ajax>will update the components with (relative) client ID chkNo, bankNameand receiptNowhen the dropdown is changed. The update will force the readonlyattribute to be re-evaluated.
在<f:ajax>将更新（相对）的客户端ID的部件chkNo，bankName和receiptNo当下拉被改变。更新将强制readonly重新评估属性。
Unrelatedto the concrete problem, the way how you used <p:dataTable><table>wherein you didn't bind the rows to var="due"is very strange, but that's subject for a possible future question/problem. The above code example assumes the right context.
与具体问题无关，<p:dataTable><table>您未将行绑定到的使用var="due"方式非常奇怪，但这是未来可能出现的问题/问题的主题。上面的代码示例假定正确的上下文。
