JSF命令按鈕，您可以基於JSF複選框/禁止使用JavaScript

Question

我使用RichFaces和我想基於h:selectBooleanCheckbox使用JavaScript 啓用/禁用h:commandButton。默認情況下，該按鈕應該被禁用並且複選框未被選中。當複選框被選中時應該啓用該按鈕，並且當複選框被取消時該按鈕被禁用。

任何幫助將不勝感激。

Answer 1

要實現此目的，您可以使用a4j:support在複選框上發生的特定事件上附加ajax提交。例如的onclick。

下面是一個簡單的例子：

豆

public class TestBean { 

    private boolean chkBoxChecked; 

    public boolean isChkBoxChecked() { 
     return chkBoxChecked; 
    } 

    public boolean isBtnDisabled() { 
     return !this.chkBoxChecked; 
    } 

    public void setChkBoxChecked(boolean chkBoxChecked) { 
     this.chkBoxChecked = chkBoxChecked; 
    } 

} 

XHTML

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich" 
    template="/WEB-INF/template/default.xhtml"> 

    <ui:define name="content"> 
     <h:form id="frmTest"> 
      <h:selectBooleanCheckbox id="chkBoolean" value="#{testBean.chkBoxChecked}"> 
       <a4j:support event="onclick" ajaxSingle="true" reRender="btnSubmit"/> 
      </h:selectBooleanCheckbox> 
      <h:commandButton id="btnSubmit" value="Submit" disabled="#{testBean.btnDisabled}"/> 
     </h:form> 
    </ui:define> 
</ui:composition> 

或者使用客戶端的方式，而不提交：

XHTML

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich" 
    template="/WEB-INF/template/default.xhtml"> 

    <ui:define name="head"> 
     <script type="text/javascript"> 
      window.onload = function() { 
       btnSubmit = document.getElementById('btnSubmit'); 
       btnSubmit.disabled = #{testBean.btnDisabled}; 
      } 
     </script> 
    </ui:define> 

    <ui:define name="content"> 
     <h:form id="frmTest" prependId="false"> 
      <h:selectBooleanCheckbox id="chkBoolean" 
       onclick="btnSubmit.disabled = !this.checked;" 
       value="#{testBean.chkBoxChecked}"/> 
      <h:commandButton id="btnSubmit" value="Submit"/> 
     </h:form> 
    </ui:define> 
</ui:composition> 

在這種情況下，disabled屬性不應在h:commandButton上設置。否則，使用js在客戶端進行更改不會影響JSF樹。

Answer 2

它最終將被轉換如果您使用RichFaces的它會生成組件隨機ID爲HTML

，所以你需要的組件

指定ID

然後只需用HTML & JavaScript來實現什麼打你要。

Answer 3

<h:form id="myForm"> 
    <h:selectBooleanCheckbox id="check" onclick="document.getElementById('myForm:myButton').disable = !this.checked"/> 

    <h:commandButton id="myButton" .../> 
</h:form> 

我不知道，如果 「this.checked」 將工作..如果不嘗試：

onclick="document.getElementById('myForm:myButton').disable = !document.getElementById('myForm:check').checked" 

或簡單jsFunction ...

<script type="text/javascript"> 
    function checkClick(check) { document.getElementById('myForm:myButton').disable = check.checked; } 
</script> 
(...) 
<h:selectBooleanCheckbox id="check" onclick="checkClick(this)"/> 
(...) 

Answer 4

正如聲明Dmitry from Openfaces，啓用/禁用faces組件（Primefaces，Openfaces，Richfaces等）必須在服務器端完成。 今後一個更好的解決方案是在發生更改事件時使用ajax！ onchange事件適用於這種情況（想象複選框使用鍵盤選中/未選中）！

<h:selecBooleanCheckbox id="box" value="#{mybean.selecteditem.booleanvalue}"......> 
<f:ajax execute="box" render="but" event="change" /> 
</h:selectBooleanCheckbox> 

<h:commandButton id="but" action="someAction" value="someValue" disabled="#{!mybean.selecteditem.booleanvalue}" /> 

通過這種方式，當取消選中該複選框時，命令按鈕被禁用，但是當選中該按鈕時啓用。

在的情況下，推薦使用<p:ajax />的Primefaces！

<p:ajax event="change" process="box" update="but"/> 

在OpenFaces，既<f:ajax />和<o:ajax />做工精細情況。

如果你有多個組件來呈現的同時，中庸之道包括它們的ID，空格分隔：

<f:ajax ......render="id1 id2 id3" />