change color of inputtextfield on select booleancheckbox - jsf-2

Question

I have a form in which there is a selectbox, and a inputtext field with default red color.
I want to change color of inputtextfield when that checkbox is selected.
How can I do that?
I am trying to achieve in this way, but unable to get change color.
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

You can use the approach suggested by Daniel. Or a slightly different version would be this
<p:inputText id="hppa1" size="5" style="#{patient.changeColor eq true ? 'color:White;background:Green;' : 'color:White;background:Red;'}"/>
Saves you unnecessary markup and processing!
UPDATE: btw, you can very well handle these events in Javascript if you do not need any server side reflection of the sign1 boolean flag

Answer 2

Alternative approach with jQuery using styleClass as #Daniel mentioned would be like this :
Define style classes in your css:
.red {
background-color: red;
}
.blue{
background-color: blue;
}
Have just one p:inputText (your approach with switching between two of them is really wrong) and add a styleClass="red" to it.
<p:inputText id="inputID" styleClass="red"/>
Then define this function :
<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>
And use it in p:selectBooleanCheckbox:
<p:selectBooleanCheckbox onchange="changeColor('inputID')"/>
Note 1: [id*="+param+"] in jQuery is because primefaces adds ids to your element (p:inputText) depending on what wraps it (eg. form, dataTable, ...). With [id*="+param+"] you can basically escape these added ids and find your desired inputText.
Note 2: If you want to work only with red class you can use :
function changeColor(param){
jQuery("[id*="+param+"]".toggleClass('red'));
};
EDIT: This approach has no problem with initial stage which you mentioned in comment to #NikhilPatil answer.

Answer 3

for start add id to your <h:panelGroup id="myWrapper">
and change the p:ajax to this <p:ajax update="myWrapper" ....
You can't update elements that are not rendered... read this Similar issue
Or , an alternative solution (since you are using primefaces) is to change your <h:panelGroup> into <p:outputPanel id="panel" autoUpdate="true"> and leave alll the rest the way it was
Output panel is a container element with several use cases, this example uses an autoUpdate outputPanel to update a component page which doesn't exist on page initially and rendered based on a condition.
Output Panel
But the way you are trying to change color is completely wrong... instead of hiding and displaying the element you should modify the css attributes of ONE element...
define 2 css classes like this
.classOne{
color:White;
background:Red;
}
.classTwo{
color:White;
background:Green;
}
.classThree{
color:White;
background:Blue;
}
and change the styleClass="" of your <p:inputText id="hppa1"
like this
<p:inputText id="hppa1" styleClass="#{patient.className}".....
add String changeColor to your bean + getter/setter and change its values from classOne to classTwo ....