JSF command button enable/disable based on JSF check box using javascript

Question

I am using RichFaces and I want to enable/disable h:commandButton based on h:selectBooleanCheckbox using Javascript. By default the button should be disabled and check box unchecked. The button should be enabled when the check box is selected and disabled when the check box is deselected.

Any help would be greatly appreciated.

Not knowing richfaces, can you do onclick="this.form.buttonName.disabled=!this.checked" or onclick="document.getElementById('buttonId').disabled=!this.checked" — mplungjan, Aug 25 '10 at 14:19

score 4 · Answer 1 · answered Jun 03 '11 at 15:46

As stated by Dmitry from Openfaces, Enabling/Disabling a faces components (Primefaces, Openfaces, Richfaces...etc) must be done on server side. A better solution is henceforth to use ajax when a change event is fired! onchange event is suitable for this situation (imagine the checkbox is checked/unchecked using Keyboard for example)!

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

This way, when the checkbox is unchecked, the command Button is disabled, but when checked the button is enabled.

In the case of Primefaces using <p:ajax /> is recommended!

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

In case of OpenFaces, both <f:ajax /> and <o:ajax /> work fine.

And if you have multiple components to render at the same time, juste include their ids, space separated :

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

Maxim Manco · Answer 2 · 2010-08-26T07:51:42.183

To achieve this you can use a4j:support to attach ajax submission on a specific event that occur on the checkbox. e.g. onclick.

Here is a simple example:

Bean

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>

Or use the client approach without submission:

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>

In this case the disabled attribute should not be set on the h:commandButton. Otherwise, changes on the client side using js will no affect the JSF tree.

I was going through the same problem and you suggestion has been really helpful. I preferred the server side approach on the java script one. Thanks again. — Abdul, Jan 18 '11 at 10:06

score 0 · Answer 3 · answered Aug 26 '10 at 07:28

0

Ultimately it will be converted to HTML

If you are using RichFaces it will generate random id for component, so you need to specify id for component

Then simply play with HTML& JavaScript to achieve what you want.

answered Aug 26 '10 at 07:28

jmj

237,923
42
401
438

score 0 · Answer 4 · answered Jan 03 '11 at 13:14

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

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

I'm not sure if "this.checked" will work.. if not try:

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

Or a simple jsFunction...

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

JSF command button enable/disable based on JSF check box using javascript

4 Answers4

Linked