commandLink disabled via javascript can still be clicked

Question

I need to disable the button based on the selected row of t:dataTable. This is the javascript method I'm calling on the row selection event (the button should be disabled if an item in the selected row has a tooltip... it's ugly, but it was the easiest thing to do):

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

This is the JSF commandLink:

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

Setting disabled attribute to the button works. The button is greyed out and if I hover the mouse over it, the cursor doesn't change as it does for other links. The problem is, that I can still click it and the method in the backing bean is called. Is there some way to prevent that? Here's the rendered disabled button:

<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>

I should probably remove the onClick attribute, but I don't know how I would be able to reenable it again.

Of course I can check the condition on the server after clicking the Update button, but that's the last resort. It would be nice if I could completely disable the button generated by JSF only from javascript without call to the server.

Answer 1

So I've found the solution. I copied the onclick attribute to another attribute on disabling button and vice versa:

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');
};

Answer 2

As you can see the generated html code is not a button but hyperlink. So you need to remove the link from link tag. Could try follows:

$(".Update").removeAttr('href');