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?


4
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.
Shadow Wizard est une oreille pour vous


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

$("#parent-selector :input").attr("disabled", true);

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)
Akshay Gundewar

154
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

4
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(),

$("#parent-selector :input").prop("disabled", true);

ou

$("#parent-selector :input").attr("disabled", "disabled");

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

4

Simplement cette ligne de code désactivera tous les éléments d'entrée

$('#yourdiv *').prop('disabled', true);

meilleure réponse de mon avis.
Ajay2707

2

Que diriez-vous d'y parvenir en utilisant uniquement l'attribut HTML "désactivé"

<form>
 <fieldset disabled>
  <div class="row">
   <input type="text" placeholder="">
   <textarea></textarea>
   <select></select>
  </div>
  <div class="pull-right">
    <button class="button-primary btn-sm" type="submit">Submit</button>
  </div>
 </fieldset>
</form>

Juste en mettant disabled dans le fieldset, tous les champs à l'intérieur de ce fieldset sont désactivés.

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

1

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.

function ToggleMenuButtons(bActivate) {
    if (bActivate == true) {
        $("#SelectorId :input[type='button']").prop("disabled", true);
    } else {
        $("#SelectorId :input[type='button']").removeProp("disabled");
    }
}

solution deux en une excellente.
3 règles du

0

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.

$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');

classe css

.disabledClass{
  background-color: rgb(235, 235, 228) !important;
}

0

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 later
var list = [];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
    list.push('#' + this.id);
});

$(list.join(',')).attr('readonly', true);

0

Utilisez la classe CSS pour empêcher de modifier les éléments div

CSS:

.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}

JS:

$('#divName').append('<div class=divoverlay></div>');

Ou ajoutez le nom de la classe dans HTML Tag. Cela empêchera de modifier les éléments div.


0

Uniquement le type de texte

$(".form-edit-account :input[type=text]").attr("disabled", "disabled");

Uniquement le type de mot de passe

$(".form-edit-account :input[type=password]").attr("disabled", "disabled");

Uniquement le type d'e-mail

$(".form-edit-account :input[type=email]").attr("disabled", "disabled");

0

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:

<div id="myForm">
    <form action="">
    ...
    </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!

$('#myForm *').attr('disabled','disabled');

1
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)
cssyphus il y a
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.