Disable/Enable <h:commandButton> on deselecting/selecting <h:selectBooleanCheckBox>

Question

I want to disable the submit button on my jsp Page if the user has not agreed to the terms and conditions. I have tried many solutions available but still not getting through. Here is my code :

 <h:form id="form2" styleClass="align topLabel page">
 <h:selectBooleanCheckbox id="check" onclick="document.getElementById('form2:saveForm').disable = !this.checked"/>Agree                 
                <li class="buttons ">
                    <div class="center">
                        <h:commandButton id="saveForm" styleClass="btTxt submit"
                            type="submit" value="Submit"
                            action="#{declarationFormBean.formSubmit }"></h:commandButton>
                    </div>
                </li>
</h:form>

Please help.

Answer 1

May the following code snippet help you

<script type="text/javascript">
        function checkClick(check) {
            document.getElementById('form2:saveForm').disabled = !check.checked; }
</script>

<h:form id="form2" >
        <h:selectBooleanCheckbox id="check" onclick="checkClick(this)"/>Agree                 
        <li class="buttons ">
            <div class="center">
                <h:commandButton id="saveForm" styleClass="btTxt submit"
                                 type="submit" value="Submit" disabled="true" ></h:commandButton>
            </div>
        </li>
</h:form>

Also you could add required field. Check this : RequiredCheckboxValidator