JSF command button enable/disable based on JSF check box using java script

Question

Hi,

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.

Thanks in Advance, Avinash.

Answer 1

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.

Answer 2

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.