在 PrimeFaces 中执行（打开）单击单选按钮

Question

我有两个单选按钮和一个文本区域。单击其中一个单选按钮时，我想更改 Textarea 的 CSS；当我单击“是”时，我想启用文本区域，当我单击“否”时，我想禁用该区域。
这是两个元素的代码：

<h:outputLabel for="data" value="Change Data" />
<p:selectOneRadio id="data" required="true" value="No">
   <f:selectItem itemValue="Yes" itemLabel="Yes" />
   <f:selectItem itemValue="No" itemLabel="No" />
</p:selectOneRadio>

<h:outputLabel for="yesdata" value="Details to change data" />
<p:inputTextarea id="yesdata" />

首先我添加了 jQuery click() 事件。但问题是，当我将这个添加到<ui:define name="scripts"> 区域时，代码会出现在正文之前，所以这不起作用。
所以我尝试将onClick 触发器添加到两个selectItem，添加一个更改css 的方法并将其添加到scripts 区域。但是当我查看渲染的源代码时，单选按钮中没有添加 onClick。

那么如何通过单选按钮执行 jQuery 操作？

Answer 1

首先我添加了 jQuery click() 事件。但问题是，当我把这个添加到<ui:define name="scripts">区域时，代码会出现在body之前，所以这行不通。

只需将target="body" 添加到<h:outputScript> 即可使其在</body> 之前结束。

<h:outputScript ... target="body" />

这适用于两个包含的脚本（良好做法）：

<h:outputScript name="onload.js" target="body" />

以及直接在标签正文中编写的脚本（不好的做法）：

<h:outputScript target="body">
    alert('Hi');
</h:outputScript>

---

所以我尝试向两个 selectItem 添加一个 onClick 触发器，添加一个更改 css 的方法并将其添加到脚本区域。但是当我查看渲染的源代码时，单选按钮中没有添加 onClick。

有两个问题：首先是onclick，而不是onClick。自 1998 年以来的 HTML 4.01 以来，onClick 无效，这已经是很久以前的事了。请注意您用于学习 HTML/JSF/etc 的资源的年龄，并确保这些资源不超过 1~3 年，否则请非常小心。

其次，<f:selectItem> tag documentation 没有列出onclick 属性。因此，我无法理解你为什么试图把它放在那里。 <p:selectOneRadio> tag documentation 列出了 onchange 属性。你应该在那边运气好一点。

<p:selectOneRadio ... onchange="alert(this.value)">

顺便说一句，您的<p:selectOneRadio value> 的用法是错误的。它应该表示对支持 bean 属性的绑定。但这是一个不同的问题。

---

与具体问题无关，无需一些 JS/jQuery 即可实现要求的简单且“纯 JSF”的方法是只需输入 <p:ajax> 即可更新 textarea组件发生变化，并让 textarea 组件的 disabled 属性有条件地检查单选按钮的选定值：

<p:selectOneRadio id="data" binding="#{yesOrNo}" required="true">
   <f:selectItem itemValue="Yes" itemLabel="Yes" />
   <f:selectItem itemValue="No" itemLabel="No" />
   <p:ajax update="yesdata" />
</p:selectOneRadio>

<p:inputTextarea id="yesdata" disabled="#{yesOrNo.value != 'Yes'}" />

在本例中，只要未选择“是”，文本区域就会被禁用。