0

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

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

我怎样才能做到这一点？

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

宝约：

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>
4

3 回答 3

2

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

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

为您节省不必要的标记和处理！

更新：顺便说一句，如果您不需要sign1布尔标志的任何服务器端反射，您可以在 Javascript 中很好地处理这些事件

于 2012-05-09T06:14:42.547 回答
2

使用@Daniel 提到的jQuery的替代方法styleClass是这样的：在您的中定义样式类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： [id*="+param+"]在 jQuery 中是因为 primefaces 添加ids到您的元素 ( p:inputText) 取决于包装它的内容（例如form，、、dataTable...）。有了[id*="+param+"]你基本上可以摆脱这些添加ids并找到你想要的inputText.

注意 2：如果您只想使用红色类，您可以使用：

function changeColor(param){
              jQuery("[id*="+param+"]".toggleClass('red'));       
            };

编辑：这种方法在您对@NikhilPatil 回答的评论中提到的初始阶段没有问题。

于 2012-05-09T06:54:35.770 回答
1

开始将 id 添加到您的<h:panelGroup id="myWrapper">

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

您无法更新未呈现的元素...阅读此类似问题

或者，另一种解决方案（因为您使用的是primefaces）是将您更改<h:panelGroup>为<p:outputPanel id="panel" autoUpdate="true">并将其余部分保持原样

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

输出面板

但是您尝试更改颜色的方式是完全错误的...而不是隐藏和显示元素，您应该修改 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....

于 2012-05-09T06:07:40.350 回答