禁用启用 <h:commandButton> 取消选择/选择 <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

Answer 2

Your button is always enabled on the server side, so correcting user-controlled code on the client side will still execute business action associated with the command button.

What you want is to disable button on the server by setting its disabled attribute to the inverse of the current checkbox value:

<h:selectBooleanCheckbox binding="#{agree}" ... />
<h:commandButton disabled="#{not agree.value}" ... />

What remains to be done is to submit the form either via ajax, by nesting <f:ajax render="form:button" /> , or synchronously, by adding onclick="document.getElementById('form').submit();" . Both changes must be done to the <h:selectBooleanCheckbox> tag.