Question

I’m using the following script to move a <tr> from any position in a table to the top of that table. This happens after an ajax form is submitted. The form’s–not the button’s–class is “top”

$(".top").click(function() {
    var thisRow = $(this).parent().parent();
    var firstRow = thisRow.parent().find("tr:first").not(thisRow);
    thisRow.insertBefore(firstRow);
});

Once an item reaches the top of the table, I would like to disable the Send Item To Top button. The problem becomes complicated because there are two other buttons in each <tr>: Move Item Up By One and Move Item Down By One (both ajax, too)

Once a <tr> is moved to the top, I would like to disable the Move Item Up By One along with the Send Item To Top button. In addition, I would like to re-enable both of them when the Move Item Down By One is clicked.

The following script is being used to swap the <tr>‘s positions when it’s moved up/down by one.

NOTE: I can NOT assign any of my buttons an id or a class because their forms are dynamically generated. I can only assign the form an ID or a class.

// Move item down/up
$(".up,.down").click(function(){
    var row = $(this).parents("tr:first");
    if ($(this).is(".up")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }
});

Here is the HTML:

<tr id="item_168" class="element168">
    <td><form action=".." class="top..." method="post" onsubmit="..."><input onclick="" type="submit" value="&uarr;" /></form></td>
    <td class="action"><form action="up..." class="up" method="post" onsubmit="..."><input onclick="" type="submit" value="&uarr;" /></form></td>
    <td class="action"><form action="down..." class="down" method="post" onsubmit="..." title="Move one"><input onclick="" type="submit" value="&darr;" /></form></td>
</tr>

Answer 1

I’m quite new to jQuery, but can you do

$(row).find('.up,.top').find('input[type=submit]').attr('disabled', 'disabled')