Ir ao conteúdo
  • Cadastre-se
brunopirschner

HTML Termos de uso para o site

Recommended Posts

Salve galera! Criei um

<div class="box_termo">
<input class="input_box" name="checkbox" type="checkbox" value="termo" />
<p class="texto_box">Eu li, entendi e concordo com estas regras e condições.</p>
<input class="input_submit" type="submit" value="Continuar" />
</div> 


mas não faço ideia de como fazer para dar prosseguimento apenas quando a checkbox estiver marcada, alguém sabe como faço para deixar o botão continuar habilitado apenas quando a checkbox for marcada?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@brunopirschner

 

5 horas atrás, brunopirschner disse:

alguém sabe como faço para deixar o botão continuar habilitado apenas quando a checkbox for marcada?

Sim. Isso você resolve com  Javascript.

 

Basicamente você mantém desabilitado por padrão o botão.  No momento que checkar o checkbox, ativa o botão.

jQuery

$('#check').click(function() {
    if($('#check').is(':checked')){
       $("#checar").prop("disabled", false);
    }else{
       $("#checar").prop("disabled", true);
    }
});

PS:

Você pode reduzir as linhas deste IF usando as operações ternárias assim:

 

 ($('#check').is(':checked')) ? $("#checar").prop("disabled", false) : $("#checar").prop("disabled", true);

 

 

Exemplo Online: http://jsfiddle.net/Ek33a/505/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Também acho importante incluir a versão com JS puro:

<div class="box_termo">
  <input class="input_box" name="checkbox" type="checkbox" value="termo" id="agreed_option"> <!-- adicionei o id -->

  <p class="texto_box">Eu li, entendi e concordo com estas regras e condições.</p>

  <input class="input_submit" type="submit" value="Continuar" id="agreed_submit" disabled> <!-- adicionei o id e atributo disabled -->
</div> 

 

let agreedBox = document.getElementById('agreed_option'); //Cria referência para o checkbox
let agreedSubmit = document.getElementById("agreed_submit"); //Cria referência para o submit

agreedBox.addEventListener("click", function(){//Observa quando o usuário clica no checkbox, então, faz a validação abaixo
	if(agreedSubmit.disabled){//Ativa o submit, caso esteja desativado
		agreedSubmit.disabled = false;
	}else{//Desativa o submit, caso esteja ativado
		agreedSubmit.disabled = true;
	}
})

 

Para entender melhor, é importante que estude sobre DOM e atributos HTML, ok?

 

Exemplo, no CodePen: https://codepen.io/JLammer/pen/erVxbK

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×