Question

我有一个表单，其中有一个选择框和一个默认红色的inputtext字段。

我想在选中该复选框时更改inputtextfield的颜色。

我该怎么做？

我试图以这种方式实现，但无法获得变色。

POJO：

private Boolean changeColor=false;
    private boolean sign1;

public void ChangeColorEvent(){
        System.out.println("inside color change event");

        changeColor=true;
        sign1=true;
        }



<h:outputText value="understood and Signed?: " />  
            <p:selectBooleanCheckbox  label="Yes" value="#{patient.sign1}" >
            <p:ajax update="hppa1" listener="#{patient.ChangeColorEvent}" /> 
            </p:selectBooleanCheckbox>
    <h:panelGroup>
    <p:inputText id="hppa" size="5" style="color:White;background:Red;" rendered="#{!patient.changeColor}" />
    <p:inputText id="hppa1" size="5" rendered="#{patient.changeColor}" style="color:White;background:Green;"/>
    </h:panelGroup>

Answer 1

您可以使用Daniel建议的方法。或者稍微不同的版本是

<p:inputText id="hppa1" size="5" style="#{patient.changeColor eq true ? 'color:White;background:Green;' : 'color:White;background:Red;'}"/>

保存您不必要的标记和处理！

更新：顺便说一句，如果你不需要sign1布尔标志的任何服务器端反射

，你可以在Javascript中很好地处理这些事件

Answer 2

使用styleClass作为@Daniel提及的 jQuery 的替代方法将是这样的：在css中定义样式类：

.red {
    background-color: red;
}

.blue{
    background-color: blue;
}

只有一个p:inputText（你在其中两个之间切换的方法确实是错误的）并为其添加styleClass="red"。

<p:inputText id="inputID" styleClass="red"/>

然后定义此功能：

<script type="text/javascript">
        function changeColor(param){
          if (jQuery("[id*="+param+"]").hasClass('red')){
              jQuery("[id*="+param+"]").removeClass('red');
              jQuery("[id*="+param+"]").addClass('blue');
          }
          else {
              jQuery("[id*="+param+"]").removeClass('blue');
              jQuery("[id*="+param+"]").addClass('red');

          }

        };
    </script>

并在p:selectBooleanCheckbox：

中使用它

<p:selectBooleanCheckbox onchange="changeColor('inputID')"/>

注意1：jQuery中的 [id*="+param+"]是因为primefaces将ids添加到您的元素（p:inputText），具体取决于包装内容（例如{{1} }，form，...）。使用dataTable，您基本上可以转义添加的[id*="+param+"]并找到所需的ids。

注2：如果您只想使用红色课程，可以使用：

inputText

编辑：这种方法对于你在评论@NikhilPatil时提到的初始阶段没有问题。

Answer 3

开始为您的<h:panelGroup id="myWrapper">

添加ID

并将p:ajax更改为此<p:ajax update="myWrapper" ....

您无法更新未呈现的元素...请阅读此Similar issue

或者，替代解决方案（因为您正在使用primefaces）是将<h:panelGroup>更改为<p:outputPanel id="panel" autoUpdate="true">并将其余部分保留为

输出面板是一个包含多个用例的容器元素，此示例使用autoUpdate outputPanel来更新最初页面上不存在并基于条件呈现的组件页面。

Output Panel

但是你试图改变颜色的方式是完全错误的...而不是隐藏和显示元素你应该修改ONE元素的css属性......

像这样定义2个css类

.classOne{
    color:White;
    background:Red;
}


.classTwo{
    color:White;
    background:Green;
}

.classThree{
    color:White;
    background:Blue;
}

并更改styleClass=""

的<p:inputText id="hppa1" 像这样

 <p:inputText id="hppa1" styleClass="#{patient.className}".....

将String changeColor添加到您的bean + getter / setter，并将其值从classOne更改为classTwo ....

在select booleancheckbox上更改inputtextfield的颜色

3 个答案: