使用javascript基于JSF复选框启用/禁用JSF命令按钮[重复]答案

【问题标题】：JSF command button enable/disable based on JSF check box using javascript [duplicate]使用javascript基于JSF复选框启用/禁用JSF命令按钮[重复]
【发布时间】：2011-04-03 18:15:52
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

不知道richfaces，你能做 onclick="this.form.buttonName.disabled=!this.checked" 或 onclick="document.getElementById('buttonId').disabled=!this.checked "

标签： javascript jsf

【解决方案1】：

要实现这一点，您可以使用a4j:support 将 ajax 提交附加到复选框上发生的特定事件上。例如点击。

这是一个简单的例子：

豆子

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>

在这种情况下，不应在h:commandButton 上设置disabled 属性。否则，客户端使用 js 进行的更改不会影响 JSF 树。

【讨论】：

我遇到了同样的问题，你的建议真的很有帮助。我更喜欢 java 脚本之一的服务器端方法。再次感谢。

【解决方案2】：

最终会转成 HTML

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

然后简单地使用 HTML 和 JavaScript 来实现你想要的。

【讨论】：

【解决方案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)"/>
(...)

【讨论】：

【解决方案4】：

正如来自 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 /> 都可以正常工作。

如果你有多个组件要同时渲染，只需包括它们的 id，空格分隔：

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

【讨论】：