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