Ir para conteúdo
Fórum Script Brasil
  • 0

Mudando a Classe de botão por JS


rxhxtx

Pergunta

Olá amigos,

estou dando uma estudada e me chegou a seguinte "barreira":

Quero montar uma função que altere a classe do botao após o usuario selecionar o checkbox

Usando o alternador entre disabled true e false esta funcionando, porem para o meu problema, não está resolvendo

 

então estava tentando juntar umas peças e cheguei a isto: (mas não funciona)


function trC(element, antigo, novo) {
    element.classList.remove(antigo);
    element.classList.add(novo);
}
function HabiDsabi(){
	if(document.getElementById('habi').checked == true){ 	 
		document.getElementById('envia').disabled=false;  
		var klas = document.getElementsByClassName('btn btn-success');
			trC(klas, 'btn btn-success', 'btn btn-success start');
		
		}  
	if(document.getElementById('habi').checked == false){ 	 
		document.getElementById('envia').disabled=true; }	}

como eu faço funcionar??

 

o habilitar e desabilitar está funcionando, 

só mudar a classe que não estou conseguindo....

 

botao:

			<form>	
				<button disabled="disabled" class="btn btn-success" name="envia" id="envia" value="Enviar" > 
					<span>botao</span>
				</button>
			<input type="checkbox" name="habi" id="habi" onClick="HabiDsabi()" >
				<span>habilita/desabilita<span>
			</form>

 

 

Resumindo:

quero transformar 

class="btn btn-success"

em

class="btn btn-success start"

quando a caixa estiver selecionada

 

 

alguém consegue me dar uma luz?

 

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 1

Faltou você terminar a função

function trC(element, antigo, novo) {
    element.classList.remove(antigo);
    element.classList.add(novo);
}
function HabiDsabi(){
	if(document.getElementById('habi').checked == true){ 	 
		document.getElementById('envia').disabled=false;
		var klas = document.getElementsByClassName('btn btn-success');
		trC(klas, 'btn btn-success', 'btn btn-success start');
    }  
	if(document.getElementById('habi').checked == false){ 	 
		document.getEleme ntById('envia').disabled=true;
		var klas = document.getElementsByClassName('btn btn-success start'); //---
		trC(klas, 'btn btn-success start', 'btn btn-success'); //---
    }
}

 

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...