1

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>

1 Resposta 1

2

O melhor era fazer isso só com CSS...

button:disabled {
	color: red;
}
<button>Eu estou ativo</button>
<button disabled>Eu estou desativado</button>

Se quiseres fazer em JavaScript/jQuery podes usar o .toggleClass(), que insere ou remove a classe consoante o valor do segundo argumento. Algo assim (usando o que já tens no teu código):

 $button.prop("disabled", !!limpos);
 $button.toggleClass("btn_off", !limpos);
 $button.toggleClass("button_cad", limpos);
1
  • 1
    Cara muito obg, funcionou perfeitamente! Commented 1/08/2016 às 16:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .