Skip to main content
2 de 4
Estructura del estado
John Doe
  • 147
  • 1
  • 30
  • 92

Deshabilitar boton dependiendo de su estado

Solicito de su ayuda llevo poco desarrollando en ASP.NET MVC y estoy que cargando unos datos en una tabla con la ayuda de Javascript, solicito de ayuda para lo siguiente, necesito deshabilitar el botón de Asignar dependiendo de su estado, si su estado es TERMINADO el botón debe aparecer como la siguiente imagen de forma disabled

introducir la descripción de la imagen aquí

Actualmente lo tengo de la siguiente manera

introducir la descripción de la imagen aquí

El siguiente es el código html con el cual construyo mi tabla

Index.cshtml

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="card shadow mb-4">
        <div class="card-header py-3">
            <h4 class="m-0 font-weight-bold text-primary">Lista</h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="ticketsTable" class="table table-hover dt-responsive flex-nowrap" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Número</th>
                            <th>Solicitante</th>
                            <th>Asunto</th>
                            <th>Categoría</th>
                            <th>Estado</th>
                            <th>Asignar</th>
                        </tr>
                    </thead>    
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

Este es el código con el cual cargo cada una de las columnas con javascript

Lista.js

"columns": [
            
            {
                "title": "Número", "data": "TicketFolio", "fnCreatedCell": function (nTd, sData, oData) {
                    $(nTd).html(`<a href=${document.getElementById("ticketDetail").value}?ticketNumber=${oData.TicketId}&ticketFolio=${oData.TicketFolio}>${oData.TicketFolio}</a>`);
            }, "searchable": true }, 
            { "title": "Solicitante", "data": "TicketAplicant", "searchable": true }, 
            { "title": "Asunto", "data": "TicketSubjet", "searchable": true },            
            { "title": "Categoria", "data": "TicketService", "searchable": true }, 
            { "title": "Estado", "data": "TicketStatus", "searchable": true },          
            { "title": "Asignar", "data": null, "fnCreatedCell": function (nTd, sData, oData) {
                $(nTd).html(`<button id=${oData.TicketId} class="btn btn-primary">Asignar</button>`);
            }, "searchable": false, "orderable": false }
        ]

El estado TERMINADO se almacena en la columna Estado

UPDATE:

La estructura que tendría Estado y para saber si es TERMINADO lo hago a través de mi formulario de registro en un combo asignando su respectivo estado

introducir la descripción de la imagen aquí

John Doe
  • 147
  • 1
  • 30
  • 92