Crear dinamicamente 2 checkbox autoexcluyentes para cada fila de una tabla

publicado por: Anonymous

Tengo dos columnas con checkboxs que se crean al vincular los registros de una tabla SQL, como id de los checkboxs les asigno el id del registro para identificarlos de manera mas individual, lo que estoy haciendo es validar que solo un checkbox de las dos columnas este activado (o “chequeado”) para cada fila, ya tengo el funcionamiento para que solo uno de los checkboxs este activado, pero como puedo hacerlo para que funcione para cada fila si los checkboxs son dinámicos?

introducir la descripción de la imagen aquí

JS

_x000D_

_x000D_

    $(document).ready(function () {_x000D_
_x000D_
        $('.chkAutoriza').change(function () {_x000D_
            if ($(this).prop('checked')) {_x000D_
                $('.chkRechaza').prop('checked', false);_x000D_
            }_x000D_
        });_x000D_
_x000D_
        $('.chkRechaza').change(function () {_x000D_
            if ($(this).prop('checked')) {_x000D_
                $('.chkAutoriza').prop('checked', false);_x000D_
            }_x000D_
        });_x000D_
    });

_x000D_

<div class="jumbotron" style="font-size:small">_x000D_
    <table class="table responsive shopex-table table-hover no-margin">_x000D_
        <thead>_x000D_
            <tr>_x000D_
                <th>Id Pago</th>_x000D_
                <th style="display:none">Id Cliente</th>_x000D_
                <th>Nombre cliente</th>_x000D_
                <th>Monto</th>_x000D_
                <th>Monto en Dólares</th>_x000D_
                <th>% comisión cliente</th>_x000D_
                <th>% comisión a pagar</th>_x000D_
                <th>Autorización</th>_x000D_
                <th>Rechazo</th>_x000D_
                <th>Comentario Rechazo</th>_x000D_
                <th>Fecha</th>_x000D_
_x000D_
            </tr>_x000D_
        </thead>_x000D_
        <tbody>_x000D_
_x000D_
            @foreach (var item in noAutorizados)_x000D_
            {_x000D_
                double montoDolares = Convert.ToDouble(item.Pagos.Monto) * 13.25;_x000D_
                decimal comisionPagar = Convert.ToInt32(item.Cliente.Comision) * item.Pagos.Monto;_x000D_
_x000D_
                <tr>_x000D_
                    <td class="idPago">_x000D_
                        @item.Pagos.IdPago_x000D_
                    </td>_x000D_
                    <td class="vcenter" style="display:none">_x000D_
                        @item.Pagos.IdCliente_x000D_
                    </td>_x000D_
                    <td class="vcenter">_x000D_
                        @item.Cliente.Nombre_x000D_
                    </td>_x000D_
                    <td class="vcenter">_x000D_
                        @string.Format("{0:n}", item.Pagos.Monto)_x000D_
                    </td>_x000D_
                    <td class="vcenter">_x000D_
                        @string.Format("{0:n}", montoDolares)_x000D_
                    </td>_x000D_
                    <td class="vcenter">_x000D_
                        @item.Cliente.Comision_x000D_
                    </td>_x000D_
                    <td class="vcenter">_x000D_
                        @string.Format("{0:n}", comisionPagar)_x000D_
                    </td>_x000D_
                    <td style="text-align:center">_x000D_
                        @Html.CheckBox("chkAutoriza", false, htmlAttributes: new { @class = "chkAutoriza", id = "chkAutoriza" + item.Pagos.IdPago })_x000D_
                    </td>_x000D_
                    <td style="text-align:center">_x000D_
                        @Html.CheckBox("chkRechaza", false, htmlAttributes: new { @class = "chkRechaza", id = "chkRechaza" + item.Pagos.IdPago })_x000D_
                    </td>_x000D_
                    <td class="vcenter">_x000D_
                        @Html.TextBox("StudentName", null, new { @class = "form-control txtComentario", id = "txtComentario" + item.Pagos.IdPago })_x000D_
                    </td>_x000D_
                    <td id="[email protected]">_x000D_
                        @item.Pagos.Fecha.ToString("dd/MM/yyyy")_x000D_
                    </td>_x000D_
_x000D_
                    <td class="vcenter text-right"></td>_x000D_
                </tr>_x000D_
            }_x000D_
        </tbody>_x000D_
    </table>_x000D_
_x000D_
    <button class="btn btn-success" id="btnGuardar">Autorizar</button>_x000D_
_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

El problema está en este código:

$(document).ready(function () {

    $('.chkAutoriza').change(function () {
        if ($(this).prop('checked')) {
            $('.chkRechaza').prop('checked', false);
        }
    });

    $('.chkRechaza').change(function () {
        if ($(this).prop('checked')) {
            $('.chkAutoriza').prop('checked', false);
        }
    });
});

Tal y como está puesto, lo que se hace es que cada vez que se pulse en chkAutoriza se marquen o desmarquen todos los chkRechaza (y viceversa), sin importar a qué fila pertenezcan. Eso va a hacer que sólo haya uno u otro activados.

Si lo que quieres es que se controlen por filas, puedes usar .closest() para seleccionar un ancestro común (p.e. el tr de la fila) y entonces hacer un .find() para la clase concreta. De ese modo, la marca/desmarca sólo afectará en la misma fila y no a todas las de la tabla.

El cambio es simple:

$(document).ready(function () {

    $('.chkAutoriza').change(function () {
        if ($(this).prop('checked')) {
            $(this).closest("tr").find('.chkRechaza').prop('checked', false);
        }
    });

    $('.chkRechaza').change(function () {
        if ($(this).prop('checked')) {
            $(this).closest("tr").find('.chkAutoriza').prop('checked', false);
        }
    });
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *