none
Problema com CheckBox + Javascript RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Boa noite!

    Não tenho um bom conhecimento em JavaScript, mas eu fiz a seguinte ação para identificar quando o Checkbox é ativado ou desativado.

            function Private_Checked() {
            $("#Checkboxid").change(function () {

                if ($(this).is(':checked')) {
                    // Código se Ativado
                }
                else {
                    // Código se Desativado
                }
            });
        }

    Com o CheckBox:

    @Html.CheckBox("chkboxid", false, new With { .OnChange = "Private_Checked()" })

    O "Problema" é os seguinte: Essa função ocorre após uma ação. Digo, tenho que clicar uma vez no Checkbox para ele funcionar. O chk vem por padrão vazio, deveria quando eu checar, ir para a função de "Codigo de ativo", mas nada ocorre. Vai ocorrer só quando eu tirar seleção novamente.

    O que poderei estar fazendo de errado? 

    Obrigado!

    Alan

    terça-feira, 16 de abril de 2013 21:24
    |

Respostas

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Alan,

    Você está utilizando o MVC 4?

    Caso sim e sua chamada Script.Render para o JQuery estiver depois do </footer>, coloque ela dentro do <head></head>.

    Provavelmente o seu script está tentando criar o delegate antes de carregar o script do JQurey.

    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")        
        @Scripts.Render("~/bundles/jquery")
    </head>

    Fiz o teste utilizando o JQuery 1.9.1 com delegate e funcionou.

    <script type="text/javascript">
            $(document).ready(function () {
                alert(9)
                $(document).delegate('#chkboxid', 'change', function () {
                    if (this.checked) {
                        // Código se Ativado
                        alert('ativo');
                    }
                    else {
                        // Código se Desativado
                        alert('inativo');
                    }
                });
            });
</script>

    Att,

    Leandro

    • Marcado como Resposta Alan.Bernardes quarta-feira, 17 de abril de 2013 20:27
    quarta-feira, 17 de abril de 2013 19:20
    |

Todas as Respostas

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Cara,

    Segue informações:

    http://stackoverflow.com/questions/2181127/asp-net-mvc-checkbox-onchange-not-working

    http://stackoverflow.com/questions/7387531/checkbox-change-event-not-firing

    http://social.msdn.microsoft.com/Forums/pt-BR/mvcpt/thread/a31a5de2-5946-45d5-b649-1c750c9e8aba/

    Atenciosamente, Samuel dos Anjos

    quarta-feira, 17 de abril de 2013 00:52
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Alan,

    Tenta assim,

    Altera o javascript criando um delegate para o evento:

    <script>
        $(document).ready(function () {
            $(document).delegate('#chkboxid', 'change', function () {
                if (this.checked) {
                    // Código se Ativado
                    alert('ativo');
                }
                else {
                    // Código se Desativado
                    alert('inativo');
                }
            });
        });
    </script>

    Na view altera o checkbox para:

    @Html.CheckBox("chkboxid", false)

    • Sugerido como Resposta Leandro Tozetto quarta-feira, 17 de abril de 2013 13:17
    quarta-feira, 17 de abril de 2013 12:27
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Obrigado Samuel, mas nesses links fiz todos os testes e não consegui um resultado do modo que queria. 

    E Obrigado Leandro, mas fiz deste modo e não deu certo. O Evento não ocorre.


    Porém eu consegui solucionar do seguinte modo:

        function Private_Checked() {
    $('#IDCheckBox').click( function() {
        if($(this).is(':checked')){
            alert('ativado');
        }else{
            alert('desativado');
        }
    })
    }

    Ele só da um "probleminha", não sei se é o caso do Alert, ele está dando um Loop nas mensagens. Digo:
    Clico para ativar: Mensagem Ativado 1x
    Clico para desativar: Mensagem Desativado 2x
    Clico para Ativar: Mensagem Ativado 3x

    E assim sucessivamente. Mas para mim não teve problemas pois a ação é para habilitar um Txtbox, e o mesmo ocorre sem problemas.

    At

    Alan
    quarta-feira, 17 de abril de 2013 13:17
    |
  • Question
    Entrar para Votar
    1
    Entrar para Votar

    Alan,

    Qual versão do JQuery você está utilizando?

    O delegate só funciona na versão 1.4.3+, mas na versão 1.7+ foi substituído por on, conforme a documentação da API .delegate()

    // jQuery 1.4.3+
$(elements).delegate( selector, events, data, handler );
// jQuery 1.7+
$(elements).on( events, selector, data, handler );

    Att,

    Leandro

    • Sugerido como Resposta Leandro Tozetto quarta-feira, 17 de abril de 2013 15:35
    quarta-feira, 17 de abril de 2013 15:32
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Então Leandro,

    Estou usando a versão 1.9.1, e mesmo assim troquei o .delegate por .on e não obtive sucesso.

    Obrigado

    Alan
    quarta-feira, 17 de abril de 2013 16:05
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Alan,

    Tem como postar o seu código?

    Att,

    Leandro

    quarta-feira, 17 de abril de 2013 16:34
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Tem sim!

    É uma aplicação em ASP.net MVC

    @Code
    ViewData("Title") = "Calcular"
End Code


<script type="text/javascript">

        $(document).ready(function () {
            $(document).on('#chkboxid', 'change', function () {
                if (this.checked) {
                    // Código se Ativado
                    alert('ativo');
                }
                else {
                    // Código se Desativado
                    alert('inativo');
                }
            });
        });


</script>

<div>
@Html.CheckBox("chkboxid", False)
</div>

    Apenas isso!

    At

    Alan
    quarta-feira, 17 de abril de 2013 16:52
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Alan,

    Você está utilizando o MVC 4?

    Caso sim e sua chamada Script.Render para o JQuery estiver depois do </footer>, coloque ela dentro do <head></head>.

    Provavelmente o seu script está tentando criar o delegate antes de carregar o script do JQurey.

    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")        
        @Scripts.Render("~/bundles/jquery")
    </head>

    Fiz o teste utilizando o JQuery 1.9.1 com delegate e funcionou.

    <script type="text/javascript">
            $(document).ready(function () {
                alert(9)
                $(document).delegate('#chkboxid', 'change', function () {
                    if (this.checked) {
                        // Código se Ativado
                        alert('ativo');
                    }
                    else {
                        // Código se Desativado
                        alert('inativo');
                    }
                });
            });
</script>

    Att,

    Leandro

    • Marcado como Resposta Alan.Bernardes quarta-feira, 17 de abril de 2013 20:27
    quarta-feira, 17 de abril de 2013 19:20
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Leandro!

    Muito obrigado, funcionou perfeitamente!

    Isso mesmo, Uso MVC 4 e não ia descobrir isso mesmo... realmente estava faltando o render do jquery no head do _layout.

    Muito bom.

    At

    Alan
    quarta-feira, 17 de abril de 2013 20:29
    |