通过javascript禁用的commandLink仍然可以单击

commandLink disabled via javascript can still be clicked

本文关键字：单击 commandLink javascript 通过      更新时间：2023-09-26

我需要根据所选的t:dataTable行禁用按钮。这是我对行选择事件调用的javascript方法（如果所选行中的项目有工具提示，则应禁用该按钮……这很难看，但这是最容易做到的）：

function processUpdateButton() {
if (!$(".selectedRow").length
    || $(".selectedRow").children().find(".tooltip").length){
    $(".Update").button({disabled:true});
} else {
    $(".Update").button({disabled:false});
};
}

这是JSF命令链接：

<h:commandLink id="update" styleClass="Update iconButton"
             action="#{myBB.update}"
             value="#{gui['button.update']}"
             tabindex="301"/>

将禁用属性设置为按钮有效。按钮是灰色的，如果我把鼠标悬停在上面，光标不会像其他链接那样改变。问题是，我仍然可以单击它，并调用backingbean中的方法。有什么办法可以防止这种情况发生吗？这是渲染禁用按钮：

<a id="mainForm:update" 
    class="iconButton ... ui-button-disabled ui-state-disabled"
    onclick="return myfaces.oam.submitForm('mainForm','mainForm:update');" 
    href="#" role="button" aria-disabled="true" disabled="disabled">
      <span class="ui-button-text">Update</span>
</a>

我可能应该删除onClick属性，但我不知道如何重新启用它。

当然，我可以在单击"更新"按钮后检查服务器上的条件，但这是最后的手段。如果我可以完全禁用JSF只从javascript生成的按钮，而不调用服务器，那就太好了。

所以我找到了解决方案。我在禁用按钮上将onclick属性复制到另一个属性，反之亦然：

var onclick;
if (!$(".selectedRow").length
    || $(".selectedRow").children().find(".tooltip").length){
    $(".Update").button({disabled:true});
    onclick=$(".Update").attr('onclick');
    $(".Update").attr('onclick2',onclick);
    $(".Update").removeAttr('onclick');
} else {
    $(".Update").button({disabled:false});
    onclick=$(".Update").attr('onclick2');
    $(".Update").attr('onclick',onclick);
    $(".Update").removeAttr('onclick2');
};

正如您所看到的，生成的html代码不是按钮，而是超链接。因此，您需要从链接标签中删除链接。可以尝试以下操作：

$(".Update").removeAttr('href');
相关文章：