Come abilitare o disabilitare il bottone submit di un form con jquery

Per disabilitare o abilitare il pulsante submit nel momento di inserimento del testo nel campo input utilizzeremo la nostra libreria jquery.

Iniziamo col richiamare la nostra libreria jquery :

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

e compilare il nostro form di esempio:

<form class="form-horizontal form-label-left"> 
  <div class="item form-group">
	<label class="control-label col-md-3 col-sm-3 col-xs-12" for="demo">Form <span class="required">*</span>
	</label>
	<div class="col-md-6 col-sm-6 col-xs-12">
	  <input autocomplete="off" id="txtNome" class="form-control col-md-7 col-xs-12"name="nome" placeholder="nome" type="text">
	</div>
  </div>
  <div class="ln_solid"></div>
  <div class="form-group">
	<div class="col-md-6 col-md-offset-3">	   
	  <button type="submit" id="btnSub" class="btn btn-success">Submit</button>
	</div>
  </div>
</form>

 

il nostro codice Jquery:

 

$(function() { 	
	$("#btnSub").attr('disabled', true);	 
	$("#txtNome").on('keyup',function() {
		if($(this).val() != '') {
		 $("#btnSub").attr("disabled" , false);
		}else{
		$("#btnSub").attr("disabled" , true);
		}
	});

});

 

Come funziona?

• $("#btnSub").attr('disabled', true);  imposta il pulsante con l'attributo Disabled
• Mentre la funziona $("#txtNome") abilita o disabilita il pulsante verificando il valore inserito nel campo input 
   

Prova anche tu!

 

---