jQuery désactiver / activer le bouton d'envoi


811

J'ai ce HTML:

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

Comment puis-je faire quelque chose comme ça:

  • Lorsque le champ de texte est vide, la soumission doit être désactivée (désactivé = "désactivé").
  • Quand quelque chose est tapé dans le champ de texte pour supprimer l'attribut désactivé.
  • Si le champ de texte redevient vide (le texte est supprimé), le bouton d'envoi doit être à nouveau désactivé.

J'ai essayé quelque chose comme ça:

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

… Mais ça ne marche pas. Des idées?


2
N'utilisez pas removeAttr ('désactivé') comme ceci. Utilisez prop () pour basculer l'état. Voir ma réponse ou la documentation officielle .
basic6

Réponses:


1195

Le problème est que l'événement change ne se déclenche que lorsque le focus est éloigné de l'entrée (par exemple, quelqu'un clique sur l'entrée ou en tabule). Essayez plutôt d'utiliser les touches:

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

2
ok, mais le problème est que lorsque je supprime la dernière lettre, je dois appuyer encore une fois pour capturer la valeur vide et désactiver mon bouton, car lorsque j'appuie sur le retour arrière pour supprimer la dernière lettre, mon champ est toujours rempli, donc ma touche est capturé puis la lettre est supprimée. alors ... comment dois-je le faire correctement?
kmunky

1
Oh, mes excuses pour ne pas avoir testé le code en premier. Si vous remplacez la touche par une touche, cela aide-t-il?
Eric Palakovich Carr

4
Et si vous modifiez la valeur du champ sans utiliser le clavier?
Nathan

1
Cela fonctionne, mais semble laisser de côté le CSS. Par exemple, appeler $ ("# loginButton"). Button (); on input id="loginButton" type="submit" name="Submit" value="Login" disabled>affichera un bouton désactivé avec les classes désactivées css.
Gaʀʀʏ

39
La méthode prop ('disabled', true) doit être utilisée par rapport à la méthode attr ('disabled', 'disabled') voir la documentation sur prop ()
Martin

129
$(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");
  }
}

4
oui ça marche! mais..une question cependant ... pouvez-vous expliquer ceci: $ (": text"). keypress (check_submit) .each (function () {check_submit ();}); merci
kmunky

1
Le problème avec celui-ci est que l'événement de pression de touche de jQuery ne se déclenche pas systématiquement lorsque vous appuyez sur les touches de retour arrière ou de suppression. Cela signifie que l'utilisateur peut annuler le texte et la fonction ne sera pas appelée, ce qui est un échec UX. Je vois le keyup comme le moyen que la plupart des gens utilisent. Je n'aime pas vraiment ça; Je veux que la rétroaction se produise à la clé, mais c'est un peu difficile à retirer.
BobRodes

79

Cette question a 2 ans mais c'est toujours une bonne question et c'était le premier résultat de Google ... mais toutes les réponses existantes recommandent de définir et de supprimer l' attribut HTML (removeAttr ("disabled")) "disabled", ce qui n'est pas la bonne approche. Il y a beaucoup de confusion entre attribut et propriété.

HTML

Le "désactivé" dans <input type="button" disabled>le balisage est appelé attribut booléen par le W3C .

HTML contre DOM

Citation:

Une propriété est dans le DOM; un attribut est dans le HTML qui est analysé dans le DOM.

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

JQuery

En relation:

Néanmoins, le concept le plus important à retenir à propos de l'attribut vérifié est qu'il ne correspond pas à la propriété vérifiée. L' attribut correspond en fait à la propriété defaultChecked et ne doit être utilisé que pour définir la valeur initiale de la case à cocher. La valeur d'attribut vérifiée ne change pas avec l'état de la case à cocher, contrairement à la propriété vérifiée. Par conséquent, la façon compatible avec tous les navigateurs de déterminer si une case à cocher est cochée consiste à utiliser la propriété ...

Pertinent:

Les propriétés affectent généralement l'état dynamique d'un élément DOM sans modifier l'attribut HTML sérialisé. Les exemples incluent la propriété value des éléments d'entrée, la propriété désactivée des entrées et des boutons ou la propriété cochée d'une case à cocher. La méthode .prop () doit être utilisée pour définir désactivé et vérifié au lieu de la méthode .attr ().

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

Sommaire

Pour [...] modifier les propriétés DOM telles que l'état [...] désactivé des éléments de formulaire, utilisez la méthode .prop () .

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


En ce qui concerne la partie désactivation lors du changement de la question: il existe un événement appelé "entrée", mais la prise en charge du navigateur est limitée et ce n'est pas un événement jQuery, donc jQuery ne le fera pas fonctionner. L'événement change fonctionne de manière fiable, mais est déclenché lorsque l'élément perd le focus. Donc, on pourrait combiner les deux (certaines personnes écoutent également la saisie et le collage).

Voici un morceau de code non testé pour montrer ce que je veux dire:

$(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);
    });
});

1
Merci pour ces informations, mais cela ne dit pas vraiment si l'utilisation de l'attribut causera un problème, par exemple une perte de compatibilité entre navigateurs. L'utilisation de l'attribut cause-t-elle réellement un problème?
ChrisJJ

Surévalué, mais je serais également intéressé de connaître des cas spécifiques où la modification de l'attribut entraîne des problèmes, comme l'a mentionné @ChrisJJ.
Armfoot

40

Pour supprimer l'utilisation d'un attribut désactivé,

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

et pour ajouter l'utilisation des attributs désactivés,

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

Prendre plaisir :)


35

ou pour nous qui n'aiment pas utiliser jQ pour chaque petite chose:

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

55
Il est grand que vous êtes végétarien Javascript et tout, mais cela ne répond pas vraiment à la question du tout .
Michelle

6
Cette réponse obtenant 25 votes positifs explique beaucoup de code merdique dans le monde: /
o0 '.

26

eric, votre code ne semble pas fonctionner pour moi lorsque l'utilisateur entre du texte puis supprime tout le texte. j'ai créé une autre version si quelqu'un a rencontré le même problème. voilà les gens:

$('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');
    }
})

14

Cela fonctionnera comme ceci:

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

Assurez-vous qu'il existe un attribut «désactivé» dans votre code HTML


12

Voici la solution pour le champ de saisie de fichier .

Pour désactiver un bouton de soumission pour le champ de fichier lorsqu'un fichier n'est pas choisi, puis activez-le après que l'utilisateur a choisi un fichier à télécharger:

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

11

vous pouvez également utiliser quelque chose comme ceci:

$(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);
        }
    });
});

voici l' exemple Live


C'est celui qui fonctionne pour moi. J'ai testé ce qui précède mais il y avait un problème avec eux. Merci Sonu!
Geeocode

10

Pour la connexion au formulaire:

<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

Si le bouton est lui-même un bouton de style jQuery (avec .button ()), vous devrez actualiser l'état du bouton afin que les classes correctes soient ajoutées / supprimées une fois que vous avez supprimé / ajouté l'attribut désactivé.

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

3
@The_Black_Smurf Je l'ai ajouté au cas où cela aiderait quelqu'un à l'avenir - quel est le mal là-dedans?
Tom Chamberlain

Sensationnel. Triste d'entendre que l'actualisation automatique de jQuery ne fonctionne pas ici. Merci!
ChrisJJ

7

Les réponses ci-dessus ne concernent pas également la vérification des événements de copier / coller basés sur le menu. Voici le code que j'utilise pour faire les deux. Notez que l'action se produit en fait avec un délai d'attente car les événements de coupure et passés se déclenchent avant le changement, le délai d'attente donne donc un peu de temps pour que cela se produise.

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

6

Vanilla JS Solution. Cela fonctionne pour un formulaire entier non seulement pour une entrée.

En question, balise JavaScript sélectionnée.

Formulaire 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>

Quelques explications:

Dans ce code, nous ajoutons un événement keyup sur le formulaire html et à chaque pression sur une touche, vérifiez tous les champs de saisie. Si au moins un champ de saisie que nous avons est vide ou ne contient que des caractères d'espace, nous attribuons la vraie valeur à la variable désactivée et désactivons le bouton de soumission.

Si vous devez désactiver le bouton Soumettre jusqu'à ce que tous les champs de saisie requis soient remplis - remplacez:

inputs.forEach(function(input, index) {

avec:

required_inputs.forEach(function(input, index) {

où required_inputs est déjà un tableau déclaré contenant uniquement les champs d'entrée requis.


6

Nous pouvons simplement avoir if & else. Si votre entrée est vide, nous pouvons avoir

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

sinon nous pouvons changer le faux en vrai


4

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

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

Le code d'activation ci-dessus est plus précis que:

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

Vous pouvez utiliser les deux méthodes.


pour activer juste utiliser .prop ('désactivé', faux);
rahim.nagori

2

J'ai dû travailler un peu pour l'adapter à mon cas d'utilisation.

J'ai un formulaire où tous les champs doivent avoir une valeur avant de soumettre.

Voici ce que j'ai fait:

  $(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);
       });
  });

Merci à tous pour leurs réponses ici.


2

Veuillez consulter le code ci-dessous pour activer ou désactiver le bouton Soumettre

Si les champs Nom et Ville ont une valeur, seul le bouton Soumettre sera activé.

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


Juste pour être pointilleux, ne devriez-vous pas attendre (au moins) le 2ème caractère avant d'activer le bouton? ;-)
Chris Pink

1

regardez cet extrait de mon projet

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

il suffit donc de désactiver le bouton après l'exécution de votre opération

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


1

Tous les types de solutions sont fournis. Je veux donc essayer une autre solution. Simplement, ce sera plus facile si vous ajoutez un idattribut dans vos champs de saisie.

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

Maintenant, voici votre jQuery

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

-1

J'espère que le code ci-dessous aidera quelqu'un .. !!! :)

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*/
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.