更改所选输入文本字段的颜色booleancheckbox

问题描述：

我有一个窗体，其中有一个选择框和一个默认为红色的输入文本字段。更改所选输入文本字段的颜色booleancheckbox

当我选中该复选框时，我想更改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>

请阅读关于'jQuery'的'change（）'和'css（）'方法。答案就在那里。请提一下你在这个问题上迄今为止所尝试的内容。只要问一个问题，甚至不尝试就不会在这里获取任何答案在stackoverflow。 – Nikhil

我编辑了我的问题，请告诉我做错了什么？ – Java

答

可以使用由丹尼尔提出的办法。或者稍微不同的版本可能是这样的

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

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

更新：顺便说一句，你可以很好的使用styleClass处理在Javascript中的这些事件，如果你不需要sign1布尔标志

它的工作很好。但是当我回到上一页或下一页时，agin来到相同的页面时，它仍然被点击，它应该到达他的初始阶段，直到我保存它。如果我也刷新了，它应该需要其初始坐标（即默认红色和未点击）正确吗？ – Java

除非您使用'RequestScoped'或'ViewScoped' bean，否则您将面临此问题。这就是为什么我的第一个评论是“jQuery”（客户端）解决方案。我认为@Fallup已经给出了你所需要的。 – Nikhil

答

起动ID添加到您的<h:panelGroup id="myWrapper">

，改变p:ajax这<p:ajax update="myWrapper" ....

不能更新未渲染的元素...阅读Similar issue

或者，一种替代解决方案（因为您使用的是primefaces）是改变你的<h:panelGroup>成<p:outputPanel id="panel" autoUpdate="true">和离开alll其余是

输出面板的方法是用几个用例的容器元素，本示例使用自动更新outputPanel更新不页上最初存在并呈现一个组件页基于条件。

Output Panel

但你正在试图改变颜色的方法是完全错误的...而不是隐藏和显示你应该修改一个元素的CSS属性的元素......

定义2 CSS类这样

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


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

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

，改变你的<p:inputText id="hppa1"

的

这样

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

添加String changeColor到你的bean +的getter/setter和改变其值从classOne到classTwo ....

答

替代做法与任何服务器端反射的jQuery作为@Daniel提到会像这样的：定义样式类在css：

.red { 
    background-color: red; 
} 

.blue{ 
    background-color: blue; 
}

只有一个p:inputText（带之间他们两个是真的错了开关你的方法），并添加一个styleClass="red"。在p:selectBooleanCheckbox

<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:inputText id="inputID" styleClass="red"/>

然后定义这个功能

<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答案评论中提及了初始阶段没有问题。

哦..多数民众赞成在伟大的！谢谢... – Java

@欢迎您光临！ – Fallup

这应该标记为正确答案！ – Nikhil

更改所选输入文本字段的颜色booleancheckbox

相关推荐