禁用启用 <h:commandButton> 取消选择/选择 <h:selectBooleanCheckBox>

Question

如果用户未同意条款和条件，我想在我的jsp页面上禁用提交按钮。 我尝试了很多可用的解决方案，但仍未通过。 这是我的代码：

 <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>

请帮忙。

Answer 1

可以使用以下代码段来帮助您

<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>

您还可以添加必填字段。 检查一下： RequiredCheckboxValidator

Answer 2

您的按钮始终在服务器端启用，因此在客户端更正用户控制的代码仍将执行与命令按钮关联的业务操作。

你想要的是通过将其disabled属性设置为当前复选框值的倒数来禁用服务器上的按钮：

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

还有待做的是通过ajax，嵌套<f:ajax render="form:button" />或同步，通过添加onclick="document.getElementById('form').submit();" 。 必须对<h:selectBooleanCheckbox>标记进行两项更改。