Jump to content
Fórum Script Brasil
  • 0

Mudando a Classe de botão por JS


Question

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 to post
Share on other sites

1 answer to this question

Recommended Posts

  • 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 to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148681
    • Total Posts
      644509
×
×
  • Create New...