PrimeFaces p:commandButton 调用disable/enable方法后仍处于禁用状态问题

问题根因 #

• enableButton未获取到目标按钮实例：你在disableButton中通过this拿到了按钮DOM对象，但enableButton触发时没有传入按钮实例，函数入参实际是你从后端传的布尔值/PrimeFaces默认的AJAX响应对象，根本找不到要操作的按钮。
• DOM属性拼写错误：原生DOM的禁用属性是disabled不是disable，你给DOM对象设置的disable属性不生效。
• 逻辑错误：enableButton中写的data.disable = data完全是错误逻辑，把入参本身赋值给入参的属性，没有任何操作按钮状态的逻辑。
• 额外问题：你后端enableButton方法返回的是false，就算逻辑正确，按钮也会保持禁用状态，如果你需要请求完成后启用按钮，这里应该返回true。

修复方案 #

方式1：使用PrimeFaces官方组件API（推荐） #

先给按钮定义widgetVar客户端实例名，通过官方API操作状态，兼容性更强：

<p:commandButton id="myBtn" 
    widgetVar="myBtnWidget"
    onclick="disableButton(PF('myBtnWidget'));"
    onkeypress="disableButton(PF('myBtnWidget'));"
    oncomplete="enableButton(PF('myBtnWidget'), ${bean.enableButton()});"
/>

修正JS函数：

function disableButton(btn) {
    btn.disable();
}

function enableButton(btn, enableFlag) {
    // 后端返回true就启用，false就保持禁用
    enableFlag ? btn.enable() : btn.disable();
}

方式2：直接操作DOM #

如果你不想用widgetVar，直接传递按钮DOM实例即可：

<p:commandButton id="myBtn" 
    onclick="disableButton(this);"
    onkeypress="disableButton(this);"
    oncomplete="enableButton(document.getElementById('#{myBtn.clientId}'), ${bean.enableButton()});"
/>

修正JS函数：

function disableButton(btnDom) {
    btnDom.disabled = true;
}

function enableButton(btnDom, enableFlag) {
    btnDom.disabled = !enableFlag;
}

内容的提问来源于stack exchange，提问作者Steve