jquery - 如何在 Td 中将启用更改为禁用？

Question

我有个问题。我有一个表格数据

像这样

<table>
    <tr>
        <td>Enabled</td>
        <td><button class="js-enabled">Desabled</button></td>
    </tr>
     <tr>
         <td>Desabled</td>
         <td><button class="js-enabled">Enabled</button></td>
    </tr>
     <tr>
        <td>Enabled</td>
        <td><button class="js-enabled">Desabled</button></td>
    </tr>
     <tr>
         <td>Desabled</td>
         <td><button class="js-enabled">Enabled</button></td>
    </tr>
     <tr>
        <td>Enabled</td>
        <td><button class="js-enabled">Desabled</button></td>
    </tr>
     <tr>
         <td>Desabled</td>
         <td><button class="js-enabled">Enabled</button></td>
    </tr>
</table>

我习惯了这个jquery函数

$('.js-enabled').click(function(){
            $(this).replaceWith('<button class="btn btn-success">Active</button>');     
            }); 

现在我想

1. 如果我单击启用按钮而不是将启用更改为禁用 Left和Right双方

关联

Answer 1

为了回答，我将使用您的代码，但只是为了让您知道，它拼写为“已禁用”。

$('.js-enabled').click(function(){
    var button = $(this);
    var label = $(this).parent().prev('td');

    button.text() == 'Desabled' ? button.text('Enabled') : button.text('Desabled');
    label.text() == 'Desabled' ? label.text('Enabled') : label.text('Desabled');
}); 

http://jsfiddle.net/EGDZE/2/

Answer 2

尝试这个：

$('.js-enabled').click(function(){
    if($(this).text()=='Enabled')
    {
        $(this).closest('tr').find('td:first-child').text('Disabled');
        $(this).text('Disabled');
    }
    else
    {
        $(this).closest('tr').find('td:first-child').text('Enabled');
         $(this).text('Enabled');
    }
});

小提琴：http: //jsfiddle.net/EGDZE/4/

Answer 3

$('.js-enabled').click(function(){
    var lableText = $(this).parent().parent().children().first();  
    (lableText.html() == "Desabled" ? lableText.html("Enable") : lableText.html("Desabled")); 
    $(this).html() == "Desabled" ? $(this).html("Enable") : $(this).html("Desabled");
});

使用此代码。