Question

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

<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">区域时，代码将出现在正文之前，因此这不起作用。
所以我尝试向 selectItem 添加onClick触发器，添加了一个更改css并将其添加到脚本 -area的方法。但是当我查看渲染的源代码时，没有onClick添加到Radio Buttons。

那么如何通过Radio Buttons执行jQuery操作呢？

Answer 1

首先我添加了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添加到Radio Buttons。

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

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

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

顺便说一下，<p:selectOneRadio value>的使用是错误的。它应该表示对backing 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'}" />

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

执行（打开）单击PrimeFaces中的radioButton

1 个答案: