禁用按钮而不改变其外观答案

【问题标题】：Disable a button without changing its appearance禁用按钮而不改变其外观
【发布时间】：2018-10-16 11:56:37
【问题描述】：

我在页面中实现了一个动态启用/禁用功能，这要归功于一个调用支持 Java bean 方法的 JavaScript 函数，该方法将布尔值设置为 true/false，然后用于禁用（或不禁用）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。

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

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

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

【问题讨论】：

是的，如果某些东西被禁用，你就不能点击它。不清楚你的问题到底是什么。因此，如果您不想禁用它，不如向它添加一个单击处理程序并取消事件并执行任何操作。
感谢您的回复。我可以实现一个单击处理程序来阻止调用 commandLink 按钮（以及所有操作侦听器）中指定的操作吗？
是的，您可以...在 clickhandler 中返回 false，就像在普通的 javascript/jquery-ui 中一样。你仍然可以做一个 javascript 'alert'
很好用。不过有一条评论：答案应该在答案中，而不是在问题的编辑中。请更正这一点。
但请记住，这是一种虚假且不安全的禁用方式。拥有浏览器开发工具的人可以轻松绕过这一点。 JSF 做所有这些服务器端的工作有一个非常好的和正当的理由（从不信任客户端）。反过来可能会更好。禁用它服务器端并通过css“启用”它可视化和可点击的客户端！！！

标签： javascript primefaces jsf-2

【解决方案1】：

您可以将css类添加到要禁用的按钮和禁用鼠标事件

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

它不会改变外观，但可以解决问题

【讨论】：

【解决方案2】：

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

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

为消息创建一个 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>

【讨论】：

您好，感谢您的回答。与原始海报的答案相同的“不好”（=坏）解决方案。可以轻松绕过。与该答案的唯一区别是“if”语句不是内联的，所以它是一个相同的答案。
对不起，我没有看到原始海报的答案。 =)

【解决方案3】：

我终于设法通过在 commandLink 上添加一个点击处理程序来做到这一点，代码如下：

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

但是，正如 Kukeltje 指出的那样：

但请记住，这是一种虚假且不安全的禁用方式。拥有浏览器开发工具的人可以轻松绕过这一点。 JSF 做所有这些服务器端（从不信任客户端） 有一个非常好的和正当的理由。反过来可能会更好。禁用它服务器端并通过css“启用”它在视觉上和可点击的客户端！！！

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

非常感谢大家的帮助！

【讨论】：