jQuery disabilita / abilita il pulsante di invio

Ho questo HTML:

<input type="text" name="textField" />
<input type="submit" value="send" />

Come posso fare qualcosa del genere:

• Quando il campo di testo è vuoto, l'invio deve essere disabilitato (disabled = "disabled").
• Quando si digita qualcosa nel campo di testo per rimuovere l'attributo disabilitato.
• Se il campo di testo diventa di nuovo vuoto (il testo viene eliminato), il pulsante di invio deve essere nuovamente disabilitato.

Ho provato qualcosa del genere:

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

... ma non funziona. Qualche idea?

Il problema è che l'evento change si attiva solo quando lo stato attivo viene spostato lontano dall'input (ad es. Qualcuno fa clic sull'input o ne esce una scheda). Prova invece ad usare il keyup:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

Questa domanda ha 2 anni ma è comunque una buona domanda ed è stato il primo risultato di Google ... ma tutte le risposte esistenti raccomandano di impostare e rimuovere l' attributo HTML (removeAttr ("disabled")) "disabled", che non è l'approccio giusto. C'è molta confusione riguardo l'attributo contro la proprietà.

HTML

Il "disabilitato" nel <input type="button" disabled>markup è chiamato un attributo booleano dal W3C .

HTML vs. DOM

Citazione:

Una proprietà è nel DOM; un attributo si trova nel codice HTML che viene analizzato nel DOM.

https://stackoverflow.com/a/7572855/664132

JQuery

Relazionato:

Tuttavia, il concetto più importante da ricordare sull'attributo controllato è che non corrisponde alla proprietà controllata. L' attributo corrisponde effettivamente alla proprietà defaultChecked e deve essere utilizzato solo per impostare il valore iniziale della casella di controllo. Il valore dell'attributo controllato non cambia con lo stato della casella di controllo, mentre la proprietà selezionata lo fa. Pertanto, il modo compatibile con più browser per determinare se una casella di controllo è selezionata è utilizzare la proprietà ...

rilevante:

Le proprietà generalmente influenzano lo stato dinamico di un elemento DOM senza modificare l'attributo HTML serializzato. Gli esempi includono la proprietà value degli elementi di input, la proprietà disabilitata di input e pulsanti o la proprietà selezionata di una casella di controllo. Il metodo .prop () dovrebbe essere usato per impostare disabilitato e controllato al posto del metodo .attr ().

$( "input" ).prop( "disabled", false );

Sommario

Per [...] modificare proprietà DOM come lo stato [...] disabilitato di elementi del modulo, utilizzare il metodo .prop () .

( http://api.jquery.com/attr/ )

Per quanto riguarda la disabilitazione in modifica parte della domanda: esiste un evento chiamato "input", ma il supporto del browser è limitato e non è un evento jQuery, quindi jQuery non lo farà funzionare. L'evento change funziona in modo affidabile, ma viene generato quando l'elemento perde lo stato attivo. Quindi uno potrebbe combinare i due (alcune persone ascoltano anche keyup e paste).

Ecco un pezzo di codice non testato per mostrare cosa intendo:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

Per rimuovere l'uso dell'attributo disabilitato,

 $("#elementID").removeAttr('disabled');

e per aggiungere l'uso di attributi disabilitati,

$("#elementID").prop("disabled", true);

Godere :)

o per noi che non amano usare jQ per ogni piccola cosa:

document.getElementById("submitButtonId").disabled = true;

eric, il tuo codice non sembra funzionare per me quando l'utente inserisce il testo, quindi elimina tutto il testo. ho creato un'altra versione se qualcuno ha riscontrato lo stesso problema. ecco gente:

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

Funzionerà così:

$('input[type="email"]').keyup(function() {
    if ($(this).val() != '') {
        $(':button[type="submit"]').prop('disabled', false);
    } else {
        $(':button[type="submit"]').prop('disabled', true);
    }
});

Assicurati che ci sia un attributo "disabilitato" nel tuo HTML

Ecco la soluzione per il campo di input del file .

Per disabilitare un pulsante di invio per il campo file quando non viene scelto un file, quindi abilitare dopo che l'utente ha scelto un file da caricare:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

html:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

puoi anche usare qualcosa del genere:

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

ecco l' esempio Live

Per l'accesso al modulo:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

Javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

Se il pulsante è esso stesso un pulsante in stile jQuery (con .button ()) sarà necessario aggiornare lo stato del pulsante in modo che le classi corrette vengano aggiunte / rimosse dopo aver rimosso / aggiunto l'attributo disabilitato.

$( ".selector" ).button( "refresh" );

Le risposte di cui sopra non riguardano anche il controllo degli eventi taglia / incolla basati sul menu. Di seguito è riportato il codice che utilizzo per fare entrambe le cose. Si noti che l'azione si verifica effettivamente con un timeout perché gli eventi cut e passato si attivano effettivamente prima che si verifichi il cambiamento, quindi il timeout dà un po 'di tempo perché ciò accada.

$( ".your-input-item" ).bind('keyup cut paste',function() {
    var ctl = $(this);
    setTimeout(function() {
        $('.your-submit-button').prop( 'disabled', $(ctl).val() == '');
    }, 100);
});

Soluzione JS alla vaniglia. Funziona per un intero modulo non solo per un input.

In questione tag JavaScript selezionato.

Modulo HTML:

var form = document.querySelector('form')
    var inputs = form.querySelectorAll('input')
    var required_inputs = form.querySelectorAll('input[required]')
    var register = document.querySelector('input[type="submit"]')
    form.addEventListener('keyup', function(e) {
        var disabled = false
        inputs.forEach(function(input, index) {
            if (input.value === '' || !input.value.replace(/\s/g, '').length) {
                disabled = true
            }
        })
        if (disabled) {
            register.setAttribute('disabled', 'disabled')
        } else {
            register.removeAttribute('disabled')
        }
    })

<form action="/signup">
        <div>
            <label for="username">User Name</label>
            <input type="text" name="username" required/>
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" name="password" />
        </div>
        <div>
            <label for="r_password">Retype Password</label>
            <input type="password" name="r_password" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="text" name="email" />
        </div>
        <input type="submit" value="Signup" disabled="disabled" />
    </form>

Qualche spiegazione:

In questo codice aggiungiamo l'evento keyup sul modulo html e su ogni tasto premuto controlla tutti i campi di input. Se almeno un campo di input che abbiamo è vuoto o contiene solo caratteri di spazio, assegniamo il valore vero alla variabile disabilitata e disabilitiamo il pulsante di invio.

Se è necessario disabilitare il pulsante di invio fino a quando tutti i campi di input richiesti non sono compilati, sostituire:

inputs.forEach(function(input, index) {

con:

required_inputs.forEach(function(input, index) {

dove richiesto_inputs è già dichiarato array contenente solo i campi di input richiesti.

Possiamo semplicemente avere se & else .se supponiamo che il tuo input sia vuoto che possiamo avere

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

altrimenti possiamo cambiare falso in vero

Disattivare: $('input[type="submit"]').prop('disabled', true);

Abilitare: $('input[type="submit"]').removeAttr('disabled');

Il codice di abilitazione sopra riportato è più preciso di:

$('input[type="submit"]').removeAttr('disabled');

Puoi usare entrambi i metodi.

Ho dovuto lavorare un po 'per adattarlo al mio caso d'uso.

Ho un modulo in cui tutti i campi devono avere un valore prima di inviare.

Ecco cosa ho fatto:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

Grazie a tutti per le loro risposte qui.

Consultare il codice seguente per abilitare o disabilitare il pulsante Invia

Se i campi Nome e Città hanno valore, sarà abilitato solo il pulsante Invia.

<script>
  $(document).ready(function() {
    $(':input[type="submit"]').prop('disabled', true);

    $('#Name').keyup(function() {
      ToggleButton();
    });
    $('#City').keyup(function() {
      ToggleButton();
    });

  });

function ToggleButton() {
  if (($('#Name').val() != '') && ($('#City').val() != '')) {
    $(':input[type="submit"]').prop('disabled', false);
    return true;
  } else {
    $(':input[type="submit"]').prop('disabled', true);
    return false;
  }
} </script>

<form method="post">

  <div class="row">
    <div class="col-md-4">
      <h2>Getting started</h2>
      <fieldset>
        <label class="control-label text-danger">Name</label>
        <input type="text" id="Name" name="Name" class="form-control" />
        <label class="control-label">Address</label>
        <input type="text" id="Address" name="Address" class="form-control" />
        <label class="control-label text-danger">City</label>
        <input type="text" id="City" name="City" class="form-control" />
        <label class="control-label">Pin</label>
        <input type="text" id="Pin" name="Pin" class="form-control" />
        <input type="submit" value="send" class="btn btn-success" />
      </fieldset>
    </div>
  </div>
</form>

guarda questo frammento del mio progetto

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

quindi appena disabilitato il pulsante dopo l'esecuzione dell'operazione

$(this).attr('disabled', 'disabled');

Vengono forniti tutti i tipi di soluzione. Quindi voglio provare per una soluzione diversa. Semplicemente sarà più facile se aggiungi un idattributo nei tuoi campi di input.

<input type="text" name="textField" id="textField"/>
<input type="submit" value="send" id="submitYesNo"/>

Ora ecco il tuo jQuery

$("#textField").change(function(){
  if($("#textField").val()=="")
    $("#submitYesNo").prop('disabled', true)
  else
    $("#submitYesNo").prop('disabled', false)
});

Spero che sotto il codice aiuti qualcuno .. !!! :)

jQuery(document).ready(function(){

    jQuery("input[type=submit]").prop('disabled', true);

    jQuery("input[name=textField]").focusin(function(){
        jQuery("input[type=submit]").prop('disabled', false);
    });

    jQuery("input[name=textField]").focusout(function(){
        var checkvalue = jQuery(this).val();
        if(checkvalue!=""){
            jQuery("input[type=submit]").prop('disabled', false);
        }
        else{
            jQuery("input[type=submit]").prop('disabled', true);
        }
    });

}); /*DOC END*/