it-swarm.it

jQuery disabilita / abilita pulsante di invio

Ho questo HTML:

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

Come posso fare qualcosa di simile a questo:

  • Quando il campo di testo è vuoto, l'invio deve essere disabilitato (disabilitato = "disabilitato").
  • Quando qualcosa viene digitato nel campo di testo per rimuovere l'attributo disabilitato.
  • Se il campo di testo diventa nuovamente vuoto (il testo viene cancellato) il pulsante di invio dovrebbe essere nuovamente disabilitato.

Ho provato qualcosa di simile a questo:

$(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?

754
kmunky

Il problema è che l'evento change si attiva solo quando lo stato attivo viene spostato dall'input (ad esempio, qualcuno toglie l'input o le schede fuori da esso). Prova invece a usare la chiave:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });
1106
$(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");
  }
}
122
cletus

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

HTML

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

HTML vs. DOM

Citazione:

Una proprietà è nel DOM; un attributo è nell'HTML che viene analizzato nel DOM.

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

JQuery

Relazionato:

Tuttavia, il concetto più importante da ricordare sull'attributo verificato è che non corrisponde alla proprietà verificata. 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 verificato non cambia con lo stato della casella di controllo, mentre la proprietà selezionata fa. Pertanto, il modo compatibile con i browser per determinare se una casella di controllo è selezionata consiste nell'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à checked di una casella di controllo. Il metodo .prop () dovrebbe essere usato per impostare disabilitato e controllato invece del metodo .attr ().

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

Sommario

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

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


Per quanto riguarda la parte relativa alla disabilitazione sulla modifica: C'è un evento chiamato "input", ma il supporto del browser è limitato e non è un evento jQuery, quindi jQuery non funzionerà. L'evento di modifica funziona in modo affidabile, ma viene attivato quando l'elemento perde lo stato attivo. Quindi si potrebbero combinare i due (alcune persone ascoltano anche keyup e incolla).

Ecco una parte di codice non testata 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);
    });
});
75
basic6

Per rimuovere l'uso di attributi disabilitati,

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

e per aggiungere l'uso di attributi disabilitati,

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

Godere :)

35
Umesh Patil

eric, il tuo codice non sembra funzionare per me quando l'utente inserisce il testo e poi cancella tutto il testo. Ho creato un'altra versione se qualcuno ha riscontrato lo stesso problema. qui vai 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');
    }
})
25
Archie1986

Ecco la soluzione per campo di input del file .

Per disabilitare un pulsante di invio per il campo del file quando non si seleziona un file, abilitarlo 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 %>
12
cider

puoi anche usare qualcosa come questo:

$(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 Esempio dal vivo

11
Sonu Sindhu

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 codice HTML

11
H. Yang

Se il pulsante è esso stesso un pulsante con 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" );
8
Tom Chamberlain

Per accedere 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);
        }
    });
});
8
alditis

Le risposte di cui sopra non risolvono anche il controllo di eventi taglia/incolla basati su menu. Di seguito è riportato il codice che uso per fare entrambe le cose. Nota che l'azione si verifica effettivamente con un timeout perché gli eventi tagliati e passati si attivano effettivamente prima che avvenga la modifica, quindi il timeout offre un po 'di tempo affinché ciò avvenga.

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

Possiamo semplicemente avere se & else .if 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

5
Ajai

Vanilla JS Solution. Funziona per un'intera forma non solo 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 keypress controlliamo tutti i campi di input. Se almeno un campo di input che abbiamo è vuoto o contiene solo caratteri di spazio, assegniamo il valore true 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 sono compilati - sostituisci:

inputs.forEach(function(input, index) {

con:

required_inputs.forEach(function(input, index) {

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

3
Alouani Younes

Si prega di consultare il codice sottostante 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>
2
Nitin Khachane

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 dell'invio.

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.

2
ringe

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

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

Ora qui è il tuo jQuery

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

dai un'occhiata a 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 è sufficiente disabilitare il pulsante dopo l'esecuzione dell'operazione

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

1

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

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

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

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

Puoi usare entrambi i metodi.

1
Dharmendra Patel