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

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

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

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并且在支持bean中处理了REFRESH DATA之后，就需要禁用refresh data functionality按钮，{} RESET FILTER ）需要启用 有什么建议吗？

Answer 1

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

将一些JavaScript扔进游戏中以实现这一目标。

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

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

它会自动地＃34;当页面刷新作为对表单提交请求的响应时重新启用。如果您实际使用的是ajax，请确保ajax update涵盖了禁用的按钮。

<强>更新

根据评论，我只是将这个表单和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添加到了测试页面，因为如果按钮被禁用（虽然它在DOM检查器中可见），它在Firefox中不会立即可见：

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

它也可以正常工作。