0

Tengo una tabla con mis td y th. Lo que quiero es bloquear botones según el valor del td. Si el valor es "Aceptada","Anulada" o "Cerrada" entonces bloquear los botones, si no ("Pendiente") entonces habilitarlos. Quiero hacerlo dinámico,con una clase misma para todos los td. Uso Jquery

Tengo esto pero no he tenido resultados,ya que me bloquea todos los botones :/

<table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th>
                                N° Cotización
                            </th>
                            <th>
                                Modalidad
                            </th>
                            <th>
                                N° Documento
                            </th>
                            <th>
                                Nombre
                            </th>
                            <th>
                                Cotización Rel.
                            </th>
                            <th>
                                Total
                            </th>
                            <th>
                                F. Registro
                            </th>
                            <th>
                                Usuario
                            </th>
                            <th>
                                Editar
                            </th>
                            <th>
                                Cambiar Estado
                            </th>
                            <th>
                                Anular
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">
                                <a data-toggle="modal" href="#DETALLE_COTIZACION">
                                    <u>
                                        17-0777
                                    </u>
                                </a>
                            </th>
                            <td>
                                Stock
                            </td>
                            <td>
                                10090934556
                            </td>
                            <td class="text-left">
                                Municipalidad de San Isidro
                            </td>
                            <td>
                                17-0732
                            </td>
                            <td class="text-right">
                                S/. 1 800.00
                            </td>
                            <td>
                                12/09/2017
                            </td>
                            <td>
                                cmejia
                            </td>
                            <td>
                                <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnEditarBloqueado" onclick="location.href='CotizacionesNuevo'" type="button">
                                    <i class="zmdi zmdi-edit zmdi-hc-1x">
                                    </i>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnCambiarBloqueado" type="button">
                                    <span class="txtEstado">
                                        Aceptada
                                        <i class="s32 ion-android-sync">
                                        </i>
                                    </span>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-danger btn-sm m-r-10 m-b-10 btn-rounded btnAnularBloqueado"type="button">
                                    <i class="s32 ion-close-round">
                                    </i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <a data-toggle="modal" href="#DETALLE_COTIZACION">
                                    <u>
                                        17-0778
                                    </u>
                                </a>
                            </th>
                            <td>
                                Stock
                            </td>
                            <td>
                                201415550995
                            </td>
                            <td class="text-left">
                                Bodegas Arcor I.R.L
                            </td>
                            <td>
                                No dispone
                            </td>
                            <td class="text-right">
                                $ 1 800.00
                            </td>
                            <td>
                                12/09/2017
                            </td>
                            <td>
                                cmejia
                            </td>
                            <td>
                                <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnEditarBloqueado" onclick="location.href='CotizacionesNuevo'" type="button">
                                    <i class="zmdi zmdi-edit zmdi-hc-1x">
                                    </i>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnCambiarBloqueado" type="button">
                                    <span class="txtEstado">
                                        Aceptada
                                        <i class="s32 ion-android-sync">
                                        </i>
                                    </span>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-danger btn-sm m-r-10 m-b-10 btn-rounded btnAnularBloqueado" type="button">
                                    <i class="s32 ion-close-round">
                                    </i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <u>
                                    17-0780
                                </u>
                            </th>
                            <td>
                                Fábrica
                            </td>
                            <td>
                                201423553995
                            </td>
                            <td class="text-left">
                                Grupo Emperador
                            </td>
                            <td>
                                16-3455
                            </td>
                            <td class="text-right">
                                $ 192.30
                            </td>
                            <td>
                                12/09/2017
                            </td>
                            <td>
                                ccostaramirez
                            </td>
                            <td>
                                <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnEditarBloqueado" onclick="location.href='CotizacionesNuevo'" type="button">
                                    <i class="zmdi zmdi-edit zmdi-hc-1x">
                                    </i>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnCambiarBloqueado" type="button">
                                    <span class="txtEstado">
                                        Aceptada
                                        <i class="s32 ion-android-sync">
                                        </i>
                                    </span>
                                </button>
                            </td>
                            <td>
                                <button class="btn btn-danger btn-sm m-r-10 m-b-10 btn-rounded btnAnularBloqueado" type="button">
                                    <i class="s32 ion-close-round">
                                    </i>
                                </button>
                            </td>
                        </tr></tbody>
                </table>

$(document).ready(function () {


    $(".txtEstado").each(function () {

        estado = $(this).text().trim();

        tamano = $(".txtEstado").size()+1;

        for (var i = 0; i < tamano; i++) {
            if (estado == "Aceptada") {
                ($(".btnEditarBloqueado").eq(i).prop('disabled', true));
                ($(".btnCambiarBloqueado").eq(i).prop('disabled', true));
                ($(".btnAnularBloqueado").eq(i).prop('disabled', true));
            }
            else if (estado == "Pendiente") {
                ($(".btnEditarBloqueado").eq(i).prop('disabled', false));
                ($(".btnCambiarBloqueado").eq(i).prop('disabled', false));
                ($(".btnAnularBloqueado").eq(i).prop('disabled', false));
            }
        }
    }); 

});

1 respuesta 1

1

Para que no te bloquee todos los botones solo debes saber primero que todo cual es el <tr> al cual pertenece el botón actual y luego de saber cual es buscar los botones que quieres bloquear, lo harías de la siguiente forma:

$(document).ready(function () {
    $(".txtEstado").each(function () {

        estado = $(this).text().trim();

        if (estado == 'Aceptada' || estado == 'Anulada' || estado == 'Cerrada') {
            $(this).parents('tr').find('.btnEditarBloqueado').prop('disabled', true);
            $(this).parents('tr').find('.btnCambiarBloqueado').prop('disabled', true);
            $(this).parents('tr').find('.btnAnularBloqueado').prop('disabled', true);
        }else{
            $(this).parents('tr').find('.btnEditarBloqueado').prop('disabled', false);
            $(this).parents('tr').find('.btnCambiarBloqueado').prop('disabled', false);
            $(this).parents('tr').find('.btnAnularBloqueado').prop('disabled', false);
        }
    }); 
});
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    
    <table class="table table-hover table-striped">
<thead>
    <tr>
        <th>
            N° Cotización
        </th>
        <th>
            Modalidad
        </th>
        <th>
            N° Documento
        </th>
        <th>
            Nombre
        </th>
        <th>
            Cotización Rel.
        </th>
        <th>
            Total
        </th>
        <th>
            F. Registro
        </th>
        <th>
            Usuario
        </th>
        <th>
            Editar
        </th>
        <th>
            Cambiar Estado
        </th>
        <th>
            Anular
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">
            <a data-toggle="modal" href="#DETALLE_COTIZACION">
                <u>
                    17-0777
                </u>
            </a>
        </th>
        <td>
            Stock
        </td>
        <td>
            10090934556
        </td>
        <td class="text-left">
            Municipalidad de San Isidro
        </td>
        <td>
            17-0732
        </td>
        <td class="text-right">
            S/. 1 800.00
        </td>
        <td>
            12/09/2017
        </td>
        <td>
            cmejia
        </td>
        <td>
            <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnEditarBloqueado" onclick="location.href='CotizacionesNuevo'" type="button">
                <i class="zmdi zmdi-edit zmdi-hc-1x">
                </i>
            </button>
        </td>
        <td>
            <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnCambiarBloqueado" type="button">
                <span class="txtEstado">
                    Anulada
                    <i class="s32 ion-android-sync">
                    </i>
                </span>
            </button>
        </td>
        <td>
            <button class="btn btn-danger btn-sm m-r-10 m-b-10 btn-rounded btnAnularBloqueado"type="button">
                <i class="s32 ion-close-round">
                </i>
            </button>
        </td>
    </tr>
    <tr>
        <th scope="row">
            <a data-toggle="modal" href="#DETALLE_COTIZACION">
                <u>
                    17-0778
                </u>
            </a>
        </th>
        <td>
            Stock
        </td>
        <td>
            201415550995
        </td>
        <td class="text-left">
            Bodegas Arcor I.R.L
        </td>
        <td>
            No dispone
        </td>
        <td class="text-right">
            $ 1 800.00
        </td>
        <td>
            12/09/2017
        </td>
        <td>
            cmejia
        </td>
        <td>
            <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnEditarBloqueado" onclick="location.href='CotizacionesNuevo'" type="button">
                <i class="zmdi zmdi-edit zmdi-hc-1x">
                </i>
            </button>
        </td>
        <td>
            <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnCambiarBloqueado" type="button">
                <span class="txtEstado">
                    Aceptada
                    <i class="s32 ion-android-sync">
                    </i>
                </span>
            </button>
        </td>
        <td>
            <button class="btn btn-danger btn-sm m-r-10 m-b-10 btn-rounded btnAnularBloqueado" type="button">
                <i class="s32 ion-close-round">
                </i>
            </button>
        </td>
    </tr>
    <tr>
        <th scope="row">
            <u>
                17-0780
            </u>
        </th>
        <td>
            Fábrica
        </td>
        <td>
            201423553995
        </td>
        <td class="text-left">
            Grupo Emperador
        </td>
        <td>
            16-3455
        </td>
        <td class="text-right">
            $ 192.30
        </td>
        <td>
            12/09/2017
        </td>
        <td>
            ccostaramirez
        </td>
        <td>
            <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnEditarBloqueado" onclick="location.href='CotizacionesNuevo'" type="button">
                <i class="zmdi zmdi-edit zmdi-hc-1x">
                </i>
            </button>
        </td>
        <td>
            <button class="btn btn-success btn-sm m-r-10 m-b-10 btn-rounded btnCambiarBloqueado" type="button">
                <span class="txtEstado">
                    Pendiente
                    <i class="s32 ion-android-sync">
                    </i>
                </span>
            </button>
        </td>
        <td>
            <button class="btn btn-danger btn-sm m-r-10 m-b-10 btn-rounded btnAnularBloqueado" type="button">
                <i class="s32 ion-close-round">
                </i>
            </button>
        </td>
    </tr></tbody>
</table>

2
  • Me funcionó,muchas gracias,realmente!
    – J. Carlos
    el 20 oct. 2017 a las 18:26
  • 1
    Genial, si te funcionó te invito a que marques la respuesta como aceptada para que cuando otros desarrolladores tengan el mismo problema sepan cual es la solución, adicional te invito a que te des una lectura de ¿Qué debo hacer cuando alguien contesta mi pregunta? para que siempre tengas todo claro, saludos !! el 20 oct. 2017 a las 18:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.