How can I disabled/enable multiple buttons using jQuery

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

give your buttons classes or IDs and use these hooks to enable / disable / hide your buttons

Answer 2

Here's the event handlers broken down into two (for readability):

$('#yourTableID').delegate('.up', 'click', function() {
  var row = $(this).closest('tr');
  var index = row.index();

  if(index  != 0) {
    row.insertBefore(row.prev());

    if(index == 1) { 
      $(this).attr('disabled', 'disabled');
    }
  } 

})
.delegate('.down', 'click', function() {
  var row = $(this).closest('tr');
  var index = row.index();

  if(index  < row.siblings().length) {
    row.insertAfter(row.next());

    if(index + 1 == row.siblings().length) {
      $(this).attr('disabled', 'disabled');
    }
  }

});

EDIT: changed row.insertAfter(row.prev()) to row.insertAfter(row.next()). Ooops.

Also, here's the fiddle to check it in action: http://jsfiddle.net/pn3MN/

Answer 3

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

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