désactiver tous les éléments de formulaire à l'intérieur de div
162
existe-t-il un moyen de désactiver tous les champs (textarea / textfield / option / input / checkbox / submit etc) dans un formulaire en indiquant uniquement le nom div parent dans jquery / javascript?
Notez qu'en faisant cela, vous faites «disparaître» les valeurs de ces éléments lors de la soumission du formulaire - pour conserver la valeur, faites-les readOnly, non désactivées.
Une idée peut être masquer / afficher un div devant les contrôles sur lesquels il autorise / empêche le clic, ainsi que des contrôles désactivés par style avec css.
Jaider
Réponses:
261
Essayez d'utiliser le :inputsélecteur, avec un sélecteur parent:
puis-je l'utiliser pour définir toutes les entrées à l'intérieur de div sur la valeur 0?
jackson5
2
Je veux désactiver <a> aussi ... Mon <a> a également un
clic
7
Citant jQuery : Étant donné que: input est une extension jQuery et ne fait pas partie de la spécification CSS, les requêtes utilisant: input ne peuvent pas tirer parti de l'amélioration des performances fournie par la méthode native DOM querySelectorAll (). Pour obtenir les meilleures performances lors de l'utilisation de: input pour sélectionner des éléments, sélectionnez d'abord les éléments en utilisant un pur sélecteur CSS, puis utilisez .filter (": input").
acme le
2
@acme: D'accord à 100% mais la question ne donne aucune indication sur le sélecteur sur lequel je pourrais éventuellement filtrer. La seule information qui m'a été donnée était que l'utilisateur doit pouvoir le faire avec un nom de parentdiv et c'est tout. Si on m'avait donné plus d'informations, j'aurais pu trouver une solution plus efficace.
Andrew Whitaker
1
Utilisez .prop () au lieu de .attr () (ci-dessus jquery 1.6)
il devrait être ('input, textarea, button'), tous les sélecteurs doivent être entre guillemets. api.jquery.com/multiple-selector En procédant à votre façon, vous envoyez plusieurs arguments.
Ivan Ivanić
2
Cela ne trouvera que vos entrées, ignorant les zones de texte et les boutons. Le sélecteur: input est la voie à suivre, mais si vous vouliez les lister explicitement, vous devrez utiliser $('#mydiv').find('input, textarea, button').
Mark Hildreth
1
... ou juste $ ('# your-form'). children (). prop ('disabled', true);
walv
@walv votre code ne fonctionne que si tous les éléments du formulaire sont un seul descendant du formulaire. Find () trouve tous les éléments de la liste quel que soit le niveau descendant. Cette ligne de code est correcte autre que d'utiliser le prop au lieu de attr pour les nouvelles versions de jquery.
Chris O
32
Pour jquery 1.6+, utilisez à la .prop()place de .attr(),
vous avez raison, mais un certain temps de travail sur les accessoires et un certain temps ne fonctionnent pas, en particulier à cause de la case à cocher et du bouton radio
damon
Je me rends compte que c'est un vieux fil de discussion, mais cela soulève des erreurs lors de l'utilisation de l'écriture manuscrite
Simon Price
5
$(document).ready(function(){
$('#chkDisableEnableElements').change(function(){if($('#chkDisableEnableElements').is(':checked')){
enableElements($('#divDifferentElements').children());}else{
disableElements($('#divDifferentElements').children());}});});function disableElements(el){for(var i =0; i < el.length; i++){
el[i].disabled =true;
disableElements(el[i].children);}}function enableElements(el){for(var i =0; i < el.length; i++){
el[i].disabled =false;
enableElements(el[i].children);}}
J'utilise la fonction ci-dessous à différents moments. Fonctionne dans un élément div ou bouton dans une table tant que le sélecteur droit est utilisé. Le simple ": bouton" ne me réactiverait pas.
Pour moi, la réponse acceptée n'a pas fonctionné car j'avais des champs cachés asp net qui ont également été désactivés, j'ai donc choisi de désactiver uniquement les champs visibles
//just to save the list so we can enable fields latervar list =[];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function(){
list.push('#'+this.id);});
$(list.join(',')).attr('readonly',true);
Si votre formulaire à l'intérieur divcontient simplement des éléments d'entrée de formulaire, cette simple requête désactivera chaque élément à l'intérieur de la formbalise:
<divid="myForm"><formaction="">
...
</form></div>
Cependant, il désactivera également les éléments autres que la saisie d'éléments dans form, car ses effets ne seront visibles que sur les éléments de type d'entrée, ce qui convient donc principalement à tous les types de formulaires!
Veuillez corriger votre deuxième phrase. Il semble dire que votre code désactivera les éléments non d'entrée, mais il indique ensuite qu'il n'affectera que les éléments d'entrée. Veuillez clarifier votre signification. (Bon truc, au fait - bonne réponse)
readOnly
, non désactivées.Réponses:
Essayez d'utiliser le
:input
sélecteur, avec un sélecteur parent:la source
div
et c'est tout. Si on m'avait donné plus d'informations, j'aurais pu trouver une solution plus efficace.la source
$('#mydiv').find('input, textarea, button')
.Pour jquery 1.6+, utilisez à la
.prop()
place de.attr()
,ou
la source
la source
Simplement cette ligne de code désactivera tous les éléments d'entrée
la source
Que diriez-vous d'y parvenir en utilisant uniquement l'attribut HTML "désactivé"
Juste en mettant disabled dans le fieldset, tous les champs à l'intérieur de ce fieldset sont désactivés.
la source
J'utilise la fonction ci-dessous à différents moments. Fonctionne dans un élément div ou bouton dans une table tant que le sélecteur droit est utilisé. Le simple ": bouton" ne me réactiverait pas.
la source
La suite désactivera toutes les entrées mais ne pourra pas la classer btn et a également ajouté une classe pour écraser désactiver css.
classe css
la source
Pour moi, la réponse acceptée n'a pas fonctionné car j'avais des champs cachés asp net qui ont également été désactivés, j'ai donc choisi de désactiver uniquement les champs visibles
la source
Utilisez la classe CSS pour empêcher de modifier les éléments div
CSS:
JS:
Ou ajoutez le nom de la classe dans HTML Tag. Cela empêchera de modifier les éléments div.
la source
Uniquement le type de texte
Uniquement le type de mot de passe
Uniquement le type d'e-mail
la source
Si votre formulaire à l'intérieur
div
contient simplement des éléments d'entrée de formulaire, cette simple requête désactivera chaque élément à l'intérieur de laform
balise:Cependant, il désactivera également les éléments autres que la saisie d'éléments dans
form
, car ses effets ne seront visibles que sur les éléments de type d'entrée, ce qui convient donc principalement à tous les types de formulaires!la source