如何在单击另一个命令按钮时禁用和启用命令按钮？

Question

我有 2 个命令按钮，如图所示，

            <h:commandButton action="#{beanOne.getRefreshData}"
                    image="images/refresh_data.png" alt="#{messages.refresh}"
                    style="margin-top:8px" />

            <h:commandButton action="#{beanTwo.resetFilter}" id="resetFilterBtn"
                    disabled="#{beanOne.disabledBtn}"
                    image="images/reset-filter.png" alt="#{messages.reset_filter}"
                    style="margin-top:8px;margin-left:5px" />

其中需要在Application Logic Phase中调用的refresh data functionality就是这样，

public String getRefreshData() throws Exception {
    try {
      LOG.debug("In class OneBean :  getRefreshData()");
      setDisabledBtn(true);

      // Some business logic code goes here


    } catch (Exception e) {
      throw e;
    }
    finally{

    }
    return IConstants.SUCCESS;
  }

RESET FILTER 按钮需要在用户单击 REFRESH DATA 后立即禁用 refresh data functionality =]) 需要启用。
有什么建议吗？

Answer 1

因此，您想在发送请求之前禁用它。您当前的尝试仅在返回与请求关联的响应后才禁用它。这确实晚了。

在游戏中投入一些 JavaScript 来实现这一目标。

<h:commandButton ... onclick="document.getElementById('form:resetFilterBtn').disabled=true" />

<h:commandButton id="resetFilterBtn" ... />

当页面刷新以响应表单提交请求时，它将 "automagically" 重新启用。如果您实际使用的是 ajax，请确保已禁用的按钮被 ajax 更新覆盖。

更新

根据评论，我只是在另一个空白项目中使用了这个表单和 bean，配置最少（只有一个虚拟图像文件）。

<h:form id="form">
    <h:commandButton id="one" image="test.png" action="#{bean.sleep}"
        onclick="document.getElementById('form:other').disabled=true" />
    <h:commandButton id="other" image="test.png" action="#{bean.sleep}" />
</h:form>

@ManagedBean
@RequestScoped
public class Bean {
    public void sleep() throws Exception {
        Thread.sleep(2000);
    }
}

可以肯定的是，我还将此 CSS 添加到测试页面，因为它在 Firefox 中如果按钮被禁用则不会立即可见（尽管它在 DOM 检查器中可见） :

<style>input[disabled] { border: 5px solid red; }</style>

它也能正常工作。

如何在单击另一个命令按钮时禁用和启用命令按钮？

How to disable and enable a command button on click of another command button?

jsf-2