You cannot disable an entire form at once. You really need to disable each of the input elements. There are basically two ways to achieve this.
First way is to use Javascript to submit the form to the server when the checkbox is clicked, so that you can use JSF component's disabled
attribute to disable the elements. Here's a basic example:
<h:form>
<h:selectBooleanCheckbox value="#{bean.freeze}" onclick="submit()" />
<h:inputText value="#{bean.value1}" disabled="#{bean.freeze}" />
<h:inputText value="#{bean.value2}" disabled="#{bean.freeze}" />
<h:inputText value="#{bean.value3}" disabled="#{bean.freeze}" />
</h:form>
Here #{bean.freeze}
should point to a boolean
property.
Second way is to write a Javascript function for this. This does not require a form submit and saves you from one HTTP request-response cycle, which is better for user experience.
<h:form>
<h:selectBooleanCheckbox onclick="disableForm(this)" />
<h:inputText value="#{bean.value1}" />
<h:inputText value="#{bean.value2}" />
<h:inputText value="#{bean.value3}" />
</h:form>
The JS function disableForm()
is basically simple. Just pass the checkbox in as function argument by this
so that you can get the parent form by checkboxElement.form
and then get all form elements by form.elements
. You only need to make sure that you don't disable the checkbox itself, so that you could re-enable the form again :)
function disableForm(checkboxElement) {
var elements = checkboxElement.form.elements;
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element != checkboxElement) {
element.disabled = checkbox.checked;
}
}
}
No need to know the ID's beforehand and this makes the JS code generic and reuseable.
Hope this helps.