Jquery Pick Value Nearest Checkbox by Line

Asked

Viewed 97 times

2

I need help with the following:

inserir a descrição da imagem aqui

I want to take the checkbox that is disabled and play on console 0 for what is disabled, and 1 for what is enabled.

My source looks like this: (Asp.net mvc)

@model IEnumerable<Apontamento.Models.Modulos>

@{
    ViewBag.Title = "Acesso";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<h2>Acesso</h2>
<br />
<table class="table table-condensed table-striped">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.cod_modulo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.nome_modulo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.usuario)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.permissao)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="linha" data-codigo_modulo="@item.cod_modulo" data-usuario="@item.usuario">
            <td>
                @Html.DisplayFor(modelItem => item.cod_modulo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.nome_modulo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.usuario)
            </td>
            <td>
                @Html.EditorFor(modelItem => item.permissao)
            </td>
        </tr>
    }
</table>
<script type="text/javascript">
    $(document).ready(function () {
        $(".linha").each(function () {
            var codigo_modulo = $(this).data("codigo_modulo");
            var usuario = $(this).data("usuario");
            var valor_atual = 0;
            if ($(this).next("input").has("checked")) {
                valor_atual = 1;
            } else {
                valor_atual = 0;
            }
            console.log(codigo_modulo + " " + usuario + " " + valor_atual);
        });
    });

</script>

I’m having second thoughts on this jquery here: 

<script type="text/javascript">
    $(document).ready(function () {
        $(".linha").each(function () {
            var codigo_modulo = $(this).data("codigo_modulo");
            var usuario = $(this).data("usuario");
            var valor_atual = 0;
            if ($(this).next("input").has("checked")) {
                valor_atual = 1;
            } else {
                valor_atual = 0;
            }
            console.log(codigo_modulo + " " + usuario + " " + valor_atual);
        });
    });

</script>

I say play for the console, but it plays like this (1 for everything)

inserir a descrição da imagem aqui

I made a $(".linha").each(function () { to go through each line, the module code and the name is getting right, but this condition is not working: 

var valor_atual = 0;
if ($(this).next("input").has("checked")) {
    valor_atual = 1;
} else {
    valor_atual = 0;
}

Can anyone help me how to test if the line checkbox is checked or not?

If it helps, the page source looks like this: (in the table)(notice that the second input is not with the checked="checked"

<table class="table table-condensed table-striped">
    <tr>
        <th>
            C&#243;digo Modulo
        </th>
        <th>
            Nome do M&#243;dulo
        </th>
        <th>
            usuario
        </th>
        <th>
            permissao
        </th>
    </tr>

        <tr class="linha" data-codigo_modulo="1" data-usuario="dayane.fiedler">
            <td>
                1
            </td>
            <td>
                Produtos
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input checked="checked" class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
        <tr class="linha" data-codigo_modulo="2" data-usuario="dayane.fiedler">
            <td>
                2
            </td>
            <td>
                Usu&#225;rios
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
        <tr class="linha" data-codigo_modulo="3" data-usuario="dayane.fiedler">
            <td>
                3
            </td>
            <td>
                Ordem Produ&#231;&#227;o
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input checked="checked" class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
        <tr class="linha" data-codigo_modulo="5" data-usuario="dayane.fiedler">
            <td>
                5
            </td>
            <td>
                Adminstrador
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input checked="checked" class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
        <tr class="linha" data-codigo_modulo="6" data-usuario="dayane.fiedler">
            <td>
                6
            </td>
            <td>
                Opera&#231;&#245;es
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input checked="checked" class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
</table>
jquery asp.net mvc checkbox

1 answer

1


You’re doing it wrong input. The .next() will select the next element of the selector and not fetch the input.

Just change the if for this reason:

if ($(this).find("input").is(":checked")) {

The .find() search for the element inside the selector and the .is(":checked") check if it’s checked.

Behold:

$(document).ready(function () {
        $(".linha").each(function () {
            var codigo_modulo = $(this).data("codigo_modulo");
            var usuario = $(this).data("usuario");
            var valor_atual = 0;
            if ($(this).find("input").is(":checked")) {
                valor_atual = 1;
            } else {
                valor_atual = 0;
            }
            console.log(codigo_modulo + " " + usuario + " " + valor_atual);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed table-striped">
    <tr>
        <th>
            C&#243;digo Modulo
        </th>
        <th>
            Nome do M&#243;dulo
        </th>
        <th>
            usuario
        </th>
        <th>
            permissao
        </th>
    </tr>

        <tr class="linha" data-codigo_modulo="1" data-usuario="dayane.fiedler">
            <td>
                1
            </td>
            <td>
                Produtos
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input checked="checked" class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
        <tr class="linha" data-codigo_modulo="2" data-usuario="dayane.fiedler">
            <td>
                2
            </td>
            <td>
                Usu&#225;rios
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
        <tr class="linha" data-codigo_modulo="3" data-usuario="dayane.fiedler">
            <td>
                3
            </td>
            <td>
                Ordem Produ&#231;&#227;o
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input checked="checked" class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
        <tr class="linha" data-codigo_modulo="5" data-usuario="dayane.fiedler">
            <td>
                5
            </td>
            <td>
                Adminstrador
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input checked="checked" class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
        <tr class="linha" data-codigo_modulo="6" data-usuario="dayane.fiedler">
            <td>
                6
            </td>
            <td>
                Opera&#231;&#245;es
            </td>
            <td>
                dayane.fiedler
            </td>
            <td>
                <input checked="checked" class="check-box" data-val="true" data-val-required="O campo permissao é obrigatório." id="item_permissao" name="item.permissao" type="checkbox" value="true" /><input name="item.permissao" type="hidden" value="false" />
            </td>
        </tr>
</table>

Note: Do not repeat the id item_permissao. A id should be unique on the page.

  • Caraaaa muuuuuuuuuito thanks!! Helped me a lot... I’m starting now in jquery and buguei to do this aushuashuas.. Thank you very much!!

  • Blz! Just don’t repeat id why is it wrong.

  • Blz... Vlw dude!

  • I added in Fiddle: https://jsfiddle.net/putomb3d/18/ now putting in the class at td and taking the value of td... ai does not repeat id :) and added a button by clicking on the button shows on the console what is checked and what is not. Thank you so much for showing me that function find()

Browser other questions tagged jquery asp.net mvc checkbox

You are not signed in. Login or sign up in order to post.