0

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

    $(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);
            }
        });
    });
<div class="jumbotron" style="font-size:small">
    <table class="table responsive shopex-table table-hover no-margin">
        <thead>
            <tr>
                <th>Id Pago</th>
                <th style="display:none">Id Cliente</th>
                <th>Nombre cliente</th>
                <th>Monto</th>
                <th>Monto en Dólares</th>
                <th>% comisión cliente</th>
                <th>% comisión a pagar</th>
                <th>Autorización</th>
                <th>Rechazo</th>
                <th>Comentario Rechazo</th>
                <th>Fecha</th>

            </tr>
        </thead>
        <tbody>

            @foreach (var item in noAutorizados)
            {
                double montoDolares = Convert.ToDouble(item.Pagos.Monto) * 13.25;
                decimal comisionPagar = Convert.ToInt32(item.Cliente.Comision) * item.Pagos.Monto;

                <tr>
                    <td class="idPago">
                        @item.Pagos.IdPago
                    </td>
                    <td class="vcenter" style="display:none">
                        @item.Pagos.IdCliente
                    </td>
                    <td class="vcenter">
                        @item.Cliente.Nombre
                    </td>
                    <td class="vcenter">
                        @string.Format("{0:n}", item.Pagos.Monto)
                    </td>
                    <td class="vcenter">
                        @string.Format("{0:n}", montoDolares)
                    </td>
                    <td class="vcenter">
                        @item.Cliente.Comision
                    </td>
                    <td class="vcenter">
                        @string.Format("{0:n}", comisionPagar)
                    </td>
                    <td style="text-align:center">
                        @Html.CheckBox("chkAutoriza", false, htmlAttributes: new { @class = "chkAutoriza", id = "chkAutoriza" + item.Pagos.IdPago })
                    </td>
                    <td style="text-align:center">
                        @Html.CheckBox("chkRechaza", false, htmlAttributes: new { @class = "chkRechaza", id = "chkRechaza" + item.Pagos.IdPago })
                    </td>
                    <td class="vcenter">
                        @Html.TextBox("StudentName", null, new { @class = "form-control txtComentario", id = "txtComentario" + item.Pagos.IdPago })
                    </td>
                    <td id="[email protected]">
                        @item.Pagos.Fecha.ToString("dd/MM/yyyy")
                    </td>

                    <td class="vcenter text-right"></td>
                </tr>
            }
        </tbody>
    </table>

    <button class="btn btn-success" id="btnGuardar">Autorizar</button>

</div>

2
  • 1
    Si las opciones son mutuamente excluyentes entonces porque no usas un group radio buttom? No necesitarías usar javascript para obtener el comportamiento que deseas, el mismo navegador lo implementaría Commented el 22 jul. 2018 a las 18:38
  • @Jose Melendez es preciso con checkbox
    – Ivxn
    Commented el 22 jul. 2018 a las 18:39

3 respuestas 3

2

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);
        }
    });
});
1

Te propongo que en vez de manejarlo como una funcion anonima que escucha permanentemente el onChange de los check, mejor agregues un evento onClick a cada check que llame a un función javaScript que verifique el checked e inhabilite el otro. Y a esa función le pasarás el id del check, de manera que cada check hará una llamada a esta función y con id se identifican los check de esa fila:

<td style="text-align:center">
        @Html.CheckBox("chkAutoriza", false, htmlAttributes: new { @class = "chkAutoriza", id = "chkAutoriza" + item.Pagos.IdPago, onClick="hab_desh("+item.Pagos.IdPago+")"})
</td>
<td style="text-align:center">
        @Html.CheckBox("chkRechaza", false, htmlAttributes: new { @class = "chkRechaza", id = "chkRechaza" + item.Pagos.IdPago, onClick="hab_desh("+item.Pagos.IdPago+")" })
</td>


<script>

    function hab_desh(idCheck){
        if ($('#chkRechaza'+idCheck).prop('checked')) {
                $('#chkRechaza'+idCheck).prop('checked', false);
        }

        if ($('#chkRechaza'+idCheck).prop('checked')) {
                $('#chkRechaza'+idCheck).prop('checked', false);
        }
    }
</script>

Espero se entienda la lógica de lo que te propongo, puesto que no estoy familiarizado con esa forma de generar el html, así que debes revisar la sintaxis. Pero la lógica del código te podría ayudar en tu caso. Quedo atento

0

Lamentablemente no se utilizar Jquery (eso con $) ni los comandos con @ por lo que no puedo mejorar tu código existente.

Radiobuttons

Pero se que con checkboxs no llegarás muy lejos, lo mejor seria utilizar radiobuttons

<body>
  <input type="radio" name="grupo1" value="a"> a<br>
  <input type="radio" name="grupo1" value="b"> b<br>
</body>

Mediante la propiedad name puedes asignarles grupos excluyentes. Simplemente añade en tu código una forma de generar los grupos name programaticamente dentro del loop.

Checkboxs

Pero si de verdad buscar realizarlo con checkboxs mira este ejemplo.

<body>
  <input type="checkbox" id="a" onclick="document.getElementById('b').checked = false">a</input>
  <input type="checkbox" id="b" onclick="document.getElementById('a').checked = false">b</input>
</body>

Simplemente crea el evento onclick de tal forma que dentro de tu loop siempre desactive el id de la casilla correspondiente.

Múltiples Checkboxs

Para la posterioridad dejo este código que sirve cuando son más de 2 checkboxs por grupo:

<body>
  <input type="checkbox" id="a" name="grupo1" onclick="document.getElementsByName('grupo1').forEach((item) => {if (item.id != this.id) item.checked = false})">a</input>
  <input type="checkbox" id="b" name="grupo1" onclick="document.getElementsByName('grupo1').forEach((item) => {if (item.id != this.id) item.checked = false})">b</input>
</body>

Como pueden ver, la función onclick de cada checkbox es siempre igual, lo que implica que con solo tener una función para todos los checkboxs es suficiente, no necesita ser modificada.

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.