Usuário com melhor resposta
Problema com CheckBox + Javascript

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
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
Todas as Respostas
-
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
- Sugerido como Resposta Samuel Rodrigues dos Anjos quarta-feira, 17 de abril de 2013 00:52
-
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
-
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 -
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
-
-
-
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- Editado Alan.Bernardes quarta-feira, 17 de abril de 2013 17:21
-
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
-