none
Problema com CheckBox + Javascript RRS feed

  • Pergunta

  • 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

  • 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

  • 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
  • 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
  • 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
  • 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
  • Alan,

    Tem como postar o seu código?

    Att,

    Leandro

    quarta-feira, 17 de abril de 2013 16:34
  • 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
  • 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
  • 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