Boa tarde, pessoal tenho um formulário com 2 inputs no qual tenho que preencher para habilitar o button
. Queria que o button
tivesse uma cor quando desabilitado e outra cor quando tivesse habilitado.
Vou mostrar o código que habilita o meu button
e o código que tentei para alterar a classe dele quando habilitado e desabilitado, mas não funcionou!
JavaScript:
$(function() {
var $inputs = $("#input-1,#input-2", "#formAdm"),
$button = $("#btn_adm");
var limpos = 0;
// contagem inicial de valores não preenchidos
$inputs.each(function() {
var $this = $(this);
var val = $this.val();
val || limpos++;
$this.data("val-antigo", val);
});
$button.prop("disabled", !!limpos);
$inputs.on("change keyup mouseup", function() {
var $this = $(this);
var val = $this.val();
limpos += (val ? 0 : 1) - ($this.data("val-antigo") ? 0 : 1);
$this.data("val-antigo", val);
$button.prop("disabled", !!limpos);
});
});
$(document).ready(function() {
if ($('#btn_adm:disabled')) {
$('#btn_adm').addClass("btn_off");
$('#btn_adm').removeClass("button_cad");
} else {
$('#btn_adm').addClass("button_cad");
$('#btn_adm').removeClass("btn_off");
}
});
HTML:
<form id="formAdm" action="" method="post">
<center>
<div class="linha_fila">
<label>Usuário</label>
<br>
<input onkeyup="this.value=this.value.replace(/[' ']/g,''); c('input-1')" required class="inp_editar" type="text" name="usuario" id="input-1" />
</div>
<div class="linha_fila">
<label>Senha</label>
<br>
<input required class="inp_editar" type="password" name="senha" id="input-2" />
</div>
<div class="linha_fila">
<label>E-mail</label>
<br>
<input onkeyup="this.value=this.value.replace(/[' ']/g,'')" required class="inp_editar" type="email" name="email" id="input-3" />
</div>
</center>
<button id="btn_adm" type="submit" class="button_cad">Salvar</button>
</form>