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" />