Question

我正在使用RichFaces，我希望使用Javascript基于h:commandButton 启用/停用 h:selectBooleanCheckbox。默认情况下，应禁用该按钮并取消选中复选框。选中该复选框时应启用该按钮，并在取消选中该复选框时禁用该按钮。

非常感谢任何帮助。

Answer 1

正如Openfaces的Dmitry所述，必须在服务器端完成启用/禁用面部组件（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}" />

这样，当取消选中该复选框时，命令按钮被禁用，但是当选中时，该按钮被启用。

如果使用Primefaces ，建议使用<p:ajax />！

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

如果是 OpenFaces ，<f:ajax />和<o:ajax />都可以正常工作。

如果你有多个组件同时渲染，juste包含它们的id，空格分隔：

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

Answer 2

要实现此目的，您可以使用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 3

最终它将转换为HTML

如果您使用的是RichFaces，它将为组件生成随机ID，因此您需要为组件指定id

然后简单地使用HTML＆amp; JavaScript实现你想要的。

Answer 4

<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)"/>
(...)

使用javascript基于JSF复选框启用/禁用JSF命令按钮

4 个答案: