如何使用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/