Question

我通过在页面中实现了动态启用/禁用功能，这要归功于JavaScript函数调用了支持Java bean方法，该方法将布尔值设置为true / false，然后将其用于禁用（或不禁用）primefaces commandLink按钮。 / p>

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

以下是简化的代码段：

JavaScript函数：

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

还有primefaces命令按钮以及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

任何帮助都将受到欢迎，非常感谢！

Answer 1

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

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

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

Answer 2

我终于设法通过在commandLink上添加带有以下代码的点击处理程序来做到这一点：

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

但是，正如库克尔特耶指出的那样：

但是请记住，这是一种伪造且不安全的禁用方式。拥有浏览器开发人员工具的人可以轻松地规避这一点。 JSF在服务器端执行所有（从不信任客户机），这是一个很好的理由。最好以其他方式完成。在服务器端禁用它，并通过css在视觉上可点击的客户端“启用”它！

由于紧急情况，我将暂时保持这种方式运行，并且我将尝试并实现正确的实现方式。

非常感谢大家的帮助！

Answer 3

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

首先删除disabled="#{!mappenBean.enabled}" 该按钮将始终启用。但是，如果条件为假，则不会提交。
向您的CommandLink添加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>

禁用按钮而不更改其外观

3 个答案: