Enable buttons in columns of a table with jquery

1

I need to enable the row buttons in a table whose contents of the first column are equal to the value I have in a variable. I've tried it in many ways but it does not work

Follow the code:

$("body").delegate('#btnFecharCaixaEditaEvento', 'click', function(event){
    event.preventDefault();
    var idEvento = 20;
    $('#tabEventos').find('tr').each( function(i,el){
        var identEvento = $(this).find('td').text();
        if( identEvento==idEvento ){
            $(this).eq(2).prop( 'disabled',false );
            $(this).eq(3).prop( 'disabled',false );
            return false;
        }
    });
});

and the html:

<table id='tabEventos' class='table table-hover table-striped table-bordered table-responsive' >
    <thead>
        <tr>
            <th><b>ID</b></th>
            <th><b>Horário</b></th>
            <th class='text-center' colspan='2'><b>Equipamentos</b></th>
            <th class='text-center' colspan='2'><b>Serviços</b></th>
            <th><b>Observações</b></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='text-right'>10</td>
            <td>07:00-10:00</td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' data-toggle='modal' data-target='#cxEditaEquipRes' disabled='disabled'>Incluir</button></td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' id='viewEquipamentos'>Ver</button></td>
            <td>blablabla</td>
        </tr>
        <tr>
            <td class='text-right'>20</td>
            <td>07:00-10:00</td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' data-toggle='modal' data-target='#cxEditaEquipRes' disabled='disabled'>Incluir</button></td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' id='viewEquipamentos'>Ver</button></td>
            <td>blablabla</td>
        </tr>
        <tr>
            <td class='text-right'>30</td>
            <td>07:00-10:00</td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' data-toggle='modal' data-target='#cxEditaEquipRes' disabled='disabled'>Incluir</button></td>
            <td class='text-center'><button type='button' class='btn btn-default btn-xs' id='viewEquipamentos'>Ver</button></td>
            <td>blablabla</td>
        </tr>
    </tbody>
</table>
    
asked by anonymous 02.06.2016 / 17:59

1 answer

0

Two changes to your code:

  • uses 'td:first' to give you only the first element td
  • uses $(this).find('button').removeAttr('disabled'); to find this element button and .removeAttr() to remove the attribute.

Result:

$('#tabEventos').find('tr').each(function(i, el) {
    var identEvento = $(this).find('td:first').text();
    if (identEvento == idEvento) {
        $(this).find('button').removeAttr('disabled');
        return false;
    }
});

jsFiddle: link

    
02.06.2016 / 22:45