禁用按钮而不改变其外观

Question

我在页面中实现了一个动态 enable/disable 函数，这要归功于 java 脚本函数调用了一个设置为 true/false 布尔值的支持 java bean 方法，它然后用于禁用（或不禁用）primefaces commandLink 按钮。

一切正常，但我想知道是否可以保持常规外观而不是更改禁用按钮的外观（甚至更好，在尝试单击它时打印警告消息而无需呈现另一个网络元素）。

以下是简化的代码片段：

Javascript函数：

function enableSubmit(){
    jQuery(element).click(function(){                       
        if (condition){
            rc_enable();
        } else {
            rc_disable();
        }
     });
}

以及 primefaces commandButton 和 remoteCommands：

<p:remoteCommand name="rc_disable" update="submitButton" actionListener="#{mappenBean.setDisabled}" />
<p:remoteCommand name="rc_enable" update="submitButton" actionListener="#{mappenBean.setEnabled}" />        

<h:commandLink id="submitButton" action="#{mappenBean.updateFund}" styleClass="FormButton" rendered="#{!sitzungBean.gedruckt}" disabled="#{!mappenBean.enabled}">
    ...[action listeners etc.]
    <h:outputText value="Eingaben übernehmen" />
</h:commandLink>

java bean 函数只是将布尔值设置为 true 或 false。

我似乎无法实现 java 脚本 click() 函数来在单击禁用按钮时显示警报，因为一旦禁用它就不再被识别。

primefaces 版本是 2.2.1（我知道...），JSF 是 2.1

欢迎任何帮助，非常感谢！

Answer 1

可以在要禁用的按钮上加上cssclass，禁用鼠标事件

.disabled-button{
  pointer-events: none;
}

它不会改变外观，但它会起到作用

Answer 2

我最终通过使用以下代码在 commandLink 上添加点击处理程序来做到这一点：

onclick="if(#{!mappenBean.enabled}) {alert('test'); return false;}"

然而，正如 Kukeltje 指出的那样：

But keep in mind that this is a fake and insecure way of disabling. People with a browser developer tool can easily circumvent this. There is a very good and valid reason JSF does all this serverside (never trust the client). It might better be done the other way around. Disable it server side and via css 'enable' it visually and clickable client side!!!

我会运行暂时保持这种状态，因为它很紧急，我会尝试实施正确的方法。

非常感谢大家的帮助！

Answer 3

您可以放置一个验证函数（客户端）来检查条件是否为 true/false，然后显示消息或提交操作。

首先删除disabled="#{!mappenBean.enabled}" 该按钮将始终启用。但是如果条件为false则不会提交。
将 onclick="return validate();" 添加到您的命令链接

为消息创建一个 javascript 函数和一个对话框。

        <script type= "text/javascript">
        function validate(){
            if(condition){
                dialogMessage.show(); // or an alert 
                return true;
            }else{
                return false;
            }
         </script>

您的 xhtml 将是这样的：

         <h:commandLink id="submitButton" action="#{mappenBean.updateFund}" styleClass="FormButton" rendered="#{!sitzungBean.gedruckt}" onclick="return validate();" >
             ...[action listeners etc.]
             <h:outputText value="Eingaben übernehmen" />
         </h:commandLink>

禁用按钮而不改变其外观

Disable a button without changing its appearance

javascript

primefaces

jsf-2