3

我有两个单选按钮和一个 Textarea。单击其中一个单选按钮时，我想更改 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" />

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

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

4

1 回答 1

6

首先，我添加了 jQuery click() 事件。但问题是，当我将它添加到<ui:define name="scripts">区域时，代码会出现在正文之前，所以这不起作用。

只需添加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 年以来的onClickHTML 4.01 以来，它是无效的，这是很久以前的事了。请注意您用于学习 HTML/JSF/etc 的资源的年龄，并确保这些资源不超过 1~3 年，否则请非常小心。

其次，<f:selectItem>标签文档没有列出该onclick属性。因此，我无法理解你为什么试图把它放在那里。<p:selectOneRadio>标签文档列出了该属性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'}" />

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

于 2013-11-04T15:57:15.323 回答