如何冻结或禁用更新输入表单

Question

我想知道我是否可以冻结或禁用整个更新表单？我有一个输入 h:form ，其中有一个复选框。当用户选中该框时，我想冻结或禁用整个表单，以便禁止用户更改输入。

谢谢，我正在使用 JSF、Spring Web Flow、Facelets 和 Trinidad。

Answer 1

当用户选中复选框时，您可能希望使用 javascript 将所有表单输入设置为禁用。类似于：

document.getElementById('id').disabled = true;

您可以对每个输入元素执行此操作，其中“id”是该元素的 ID。

Answer 2

如果您只想禁用某些输入，最好枚举它们：

function OptCheckBox(chkd) {
 if (chkd == 'y') {
  document.frm.input1.disabled = true;
  document.frm.input2.disabled = true;
 }
}

Answer 3

您无法一次禁用整个表单。您确实需要禁用每个输入元素。基本上有两种方法可以实现这一目标。

第一种方法是在单击复选框时使用 Javascript 将表单提交到服务器，这样您就可以使用 JSF 组件的 disabled 属性来禁用元素。这是一个基本示例：

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

这里 #{bean.freeze} 应指向 boolean 属性。

第二种方法是为此编写一个 Javascript 函数。这不需要表单提交，并且可以避免一个 HTTP 请求-响应周期，这有利于用户体验。

<h:form>
    <h:selectBooleanCheckbox onclick="disableForm(this)" />
    <h:inputText value="#{bean.value1}" />
    <h:inputText value="#{bean.value2}" />
    <h:inputText value="#{bean.value3}" />
</h:form>

JS 函数 disableForm() 基本上很简单。只需通过 this 将复选框作为函数参数传入，这样您就可以通过 checkboxElement.form 获取父表单，然后通过 form.elements< 获取所有表单元素/代码>。您只需要确保没有禁用复选框本身，这样您就可以再次重新启用表单:)

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

无需事先知道 ID，这使得 JS 代码通用且可重用。