J'ai ce code HTML:
<input type="text" name="textField" />
<input type="submit" value="send" />
Comment puis-je faire quelque chose comme ça:
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?
Le problème est que l'événement de modification ne se déclenche que lorsque le focus est éloigné de l'entrée (par exemple, quelqu'un clique sur l'entrée ou la désélectionne). Essayez plutôt d’utiliser 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");
}
}
Cette question a 2 ans, mais reste une bonne question et il s’agissait du premier résultat de Google ... mais toutes les réponses existantes recommandent de définir et 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é.
Le "désactivé" dans <input type="button" disabled>
dans le balisage est appelé un attribut booléen par le W3C .
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
Apparenté, relié, connexe:
Néanmoins, le concept le plus important à retenir concernant 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 de l'attribut coché ne change pas avec l'état de la case à cocher, contrairement à la propriété cochée. Par conséquent, la méthode compatible avec plusieurs navigateurs pour 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é à la place de la méthode .attr ().
$( "input" ).prop( "disabled", false );
Pour modifier les [...] propriétés du 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 de la question de la modification: il existe un événement appelé "entrée", mais la prise en charge du navigateur est limitée et il ne s'agit pas d'un événement jQuery. Par conséquent, 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 peut combiner les deux (certaines personnes écoutent aussi keyup et 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);
});
});
Pour supprimer l'attribut désactivé, utilisez:
$("#elementID").removeAttr('disabled');
et d'ajouter l'utilisation d'attribut désactivé,
$("#elementID").prop("disabled", true);
Prendre plaisir :)
ou pour nous qui n'aiment pas utiliser jQ pour chaque petite chose:
document.getElementById("submitButtonId").disabled = true;
eric, votre code ne semblait pas fonctionner pour moi lorsque l'utilisateur saisit du texte, puis le supprime. J'ai créé une autre version si quelqu'un rencontrait le même problème. vous allez les gars:
$('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');
}
})
Voici la solution pour champ de saisie.
Pour désactiver un bouton d'envoi pour le champ de fichier lorsqu'un fichier n'est pas sélectionné, activez cette option 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 %>
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 y a un attribut 'disabled' dans votre code HTML
vous pouvez aussi 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
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);
}
});
});
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 appropriées soient ajoutées/supprimées une fois que vous avez supprimé/ajouté l'attribut désactivé.
$( ".selector" ).button( "refresh" );
Les réponses ci-dessus ne traitent pas également de la vérification des événements de couper/coller basés sur les menus. Ci-dessous, le code que j'utilise pour faire les deux. Notez que l'action se produit réellement avec un délai d'expiration, car les événements coupés et passés se déclenchent réellement avant le changement. Le délai d'expiration laisse 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);
});
Nous pouvons simplement avoir si & else .si nous supposons que votre entrée est vide nous pouvons avoir
if($(#name).val() != '') {
$('input[type="submit"]').attr('disabled' , false);
}
sinon nous pouvons changer faux en vrai
Vanilla JS Solution. Cela fonctionne pour tout un formulaire et pas seulement une entrée.
En question sélectionné balise JavaScript.
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 un formulaire HTML et, à chaque pression sur une touche, vérifie tous les champs de saisie. Si au moins un des champs que nous avons est vide ou ne contient que des espaces, nous affectons la vraie valeur à la variable désactivée et désactivons le bouton d'envoi.
Si vous devez désactiver le bouton d'envoi jusqu'à ce que tous les champs de saisie obligatoires soient renseignés - 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 obligatoires.
S'il vous plaît voir 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>
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 d'être soumis.
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.
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.
Tous les types de solutions sont fournis. Je veux donc essayer une solution différente. Simplement, cela sera plus facile si vous ajoutez un attribut id
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)
});
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
donc juste désactivé le bouton après votre opération exécutée
$(this).attr('disabled', 'disabled');