Question jQuery désactiver / activer le bouton Envoyer


J'ai ce code HTML:

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

Comment puis-je faire quelque chose comme ceci:

  • Lorsque le champ de texte est vide, l'envoi doit être désactivé (désactivé = "désactivé").
  • Lorsque quelque chose est tapé dans le champ de texte pour supprimer l'attribut désactivé.
  • Si le champ de texte est à nouveau vide (le texte est supprimé), le bouton d'envoi doit à nouveau être 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? Merci.


682
2017-10-20 14:21


origine


Réponses:


Le problème est que l'événement de changement ne se déclenche que lorsque le focus est éloigné de l'entrée (par exemple, quelqu'un clique sur l'entrée ou sur les tabulations). Essayez d'utiliser le code à la place:

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

1005
2017-10-20 14:26



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

112
2017-10-20 14:23



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 le réglage et enlever le HTML attribut (removeAttr ("désactivé")) "désactivé", ce qui n'est pas la bonne approche. Il y a beaucoup de confusion concernant l'attribut et la propriété.

HTML

Les "handicapés" dans <input type="button" disabled> dans le balisage est appelé un attribut booléen par le W3C.

HTML vs. DOM

Citation:

Une propriété est dans le DOM; un attribut est dans le code 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 checked est qu'il ne correspond pas à la propriété checked. le attribut correspond en fait à la propriété defaultChecked et devrait être utilisé uniquement pour définir la valeur initiale de la case à cocher. La valeur de l'attribut checked ne change pas avec l'état de la case à cocher, contrairement à la propriété checked. Par conséquent, la manière compatible avec tous les navigateurs pour déterminer si une case est cochée est d'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, le 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 disabled et checked à la place de la méthode .attr ().

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

Résumé

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

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


En ce qui concerne la partie désactiver sur le changement de la question: Il y a un événement appelé "entrée", mais le support du navigateur est limité et ce n'est pas un événement jQuery, donc jQuery ne le fera pas fonctionner. L'événement de modification 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 aussi pour le keyup et le paste).

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

66
2017-09-25 09:32



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

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

31
2017-07-10 03:57



Eric, votre code ne semble pas fonctionner pour moi lorsque l'utilisateur entre le texte, puis supprime tout le texte. J'ai créé une autre version si quelqu'un a rencontré le même problème. ici vous allez 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');
    }
})

25
2017-11-25 19:52



Pour supprimer l'utilisation des attributs désactivés,

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

et pour ajouter l'utilisation d'attribut désactivé,

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

Prendre plaisir :)


25
2018-01-22 10:15



Voici la solution pour champ de saisie de fichier.

Pour désactiver un bouton d'envoi pour un champ de fichier lorsqu'un fichier n'est pas sélectionné, 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 %>

10
2017-11-20 16:33



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 Exemple en direct


10
2017-07-10 04:09