如何使用jQuery禁用/啓用多個按鈕

Question

我正在使用以下腳本將<tr>從表中的任意位置移動到該表的頂部。這發生在ajax表單提交後。該form's - 而不是button's - 類是「頂級」

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

一旦物品到達表的頂部，我想禁用Send Item To Top按鈕。因爲在每個<tr>另外兩個按鈕的問題變得複雜：Move Item Up By One和Move Item Down By One（包括AJAX，太）

一旦<tr>移動到頂部，我想與Send Item To Top按鈕沿禁用Move Item Up By One。另外，我想在單擊Move Item Down By One時重新啓用它們。

下面的腳本被用於交換<tr>的上/下移動位置。

注：我不能指定任何我的按鈕的id或類，因爲他們的形式是動態生成的。我只能將表單分配給一個ID或一個類。

// 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()); 
    } 
}); 

下面是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

我是很新的jQuery的，但你可以做

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

Answer 2

給你的按鈕類或ID，並使用這些掛鉤啓用/禁用/隱藏按鈕

Answer 3

這裏的事件處理程序分爲兩（爲了便於閱讀）：

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

}); 

編輯︰改變row.insertAfter（row.prev （））到row.insertAfter（row.next（））。糟糕！

而且，這裏的小提琴，以檢查它在行動：http://jsfiddle.net/pn3MN/