更改所選輸入文本字段的顏色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>

來源

2012-05-09 Java

請閱讀關於'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布爾標誌

來源

2012-05-09 06:14:42 Nikhil

它的工作很好。但是當我回到上一頁或下一頁時，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 ....

來源

2012-05-09 06:07:40 Daniel

替代做法與任何服務器端反射的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答案評論中提及了初始階段沒有問題。

來源

2012-05-09 06:54:35 Fallup

哦..多數民衆贊成在偉大的！謝謝... – Java

@歡迎您光臨！ – Fallup

這應該標記爲正確答案！ – Nikhil

更改所選輸入文本字段的顏色booleancheckbox

回答

相關問題