How to enable and disable a button with jquery?

0

Hello, I have a question, I have 2 input and a select and a clear button. What seo is when the 3 fields are filled (input and select) the button is enabled but remains disabled. I would appreciate your help! Thanks in advance.

Pdt: I'm working with Materialize.css

I'm trying something like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login</title>
        <link rel="stylesheet" href="css/materialize.min.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body> 
      <div class="materialContainer">
        <div  style="background-color:rgba(208, 208, 208, 0.00);"></div>
          <div class="card">

            <h1 class="title" >&nbsp;&nbsp;&nbsp;
              <img src="img/logo_sesion.png" width="90" style="position:relative; right: 35px; bottom: 30px"/>
            </h1>

            <form name="Login">

              <div class="card-content">
                  <div class="row" style="margin: auto">
                    <div class="input-field col s12">
                        <input id="user_name" type="text" class="validate">
                        <label for="user_name" class="active">Usuario (Email)</label>
                    </div>
                  </div>
                  <div class="row" style="margin: auto">
                    <div class="input-field col s12">
                      <input id="password" type="text" class="validate">
                      <label for="password" class="active">Contraseña</label>
                    </div>
                 </div>
                 <div class="row" style="margin: auto">
                    <div class="input-field col s12">
                      <select id="dominio">
                        <option value="" disabled selected>Seleccionar</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                      </select>
                      <label>Dominio</label>
                    </div>
                 </div>
                 <div class="col s10 offset-s2 center-align">
                   <a id="login_ing" class="waves-effect grey darken-3 btn disabled" type="submit" name="action">Ingresar</a>
                 </div>
             </div>                 
        </form> 
          </div>   
      </div>

        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/materialize.min.js"></script>

        <script>
          $(document).ready(function() {
              $('select').material_select();
          });

        $(document).ready(function() {
            if($("#user_name").val() === "" && $("#password").val() === "" && $("#dominio").val() === "") {
                $("#login_ing").attr("disabled", true);
            }else{
                $("#login_ing").attr("disabled", false); 
            }
  });

        </script>
    </body>
</html>

But do not I get any advice?

    
asked by Alvaro Urbano Cardenas 05.11.2017 в 21:24
source

2 answers

0

I found a solution to what I asked but it is not quite finished, they will see I need the select and I do not know how to do it if they knew it would be great to share it, Regards!

$(document).ready(function() {
    $('a[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').keypress(function(){
      if($("#user_name").val() != '' && $("#password").val() != '') {
        $('a[type="submit"]').removeAttr('disabled');
      }
    });
});
    
answered by 05.11.2017 / 23:52
source
0
$('#boton').attr("disabled", true);

With that code it should work to disable it. If you want to enable it again, try:

$('#boton').attr("disabled", false);
    
answered by 05.11.2017 в 21:35