How to disable a delete button after it has been pressed?

Question

I have small table which has the following code for the delete button. When I click on the delete button all the delete buttons in the row are disabled. I only want one button to be disabled corresponding to the appropriate value in the table. The rest of the buttons should stay enabled.

                <c:when
                    test="${(****) == 1 && ****}">
                    <display:column title="Delete" class="cell-text-centered">
                        <i class="btn-link glyphicon glyphicon-trash"
                            onclick="fn_delete('<%=urlDelete%>')"></i>
                    </display:column>
                </c:when>
                <c:otherwise>
                    <display:column title="Delete" style="width:5%"
                        class="cell-text-centered">
                        <i class="glyphicon glyphicon-trash"></i>
                    </display:column>
                </c:otherwise>
            </c:choose>

<script>
function fn_delete(url) {
    var deleteAnswer = confirm("Do you want to delete corresponding data?");
    if (deleteAnswer == true) {
        document.Form.action = url;
        document.Form.submit();
    }
}
</script>

Answer 1

When you click on the button , you might get an event e available inside function scope. See if you could use the source of an event and add add an attribute called disabled to your html button element