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?

Amirash
la source
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
duplication possible de Comment désactiver tout le contenu div
Michel Ayres
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);
Andrew Whitaker
la source
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');
Trevor
la source
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");
Optimus Prime
la source
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);
        }
    }
Syed Nasir Abbas
la source
4

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

$('#yourdiv *').prop('disabled', true);
Samir Rahimy
la source
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');
طلحة
la source
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");
    }
}
AWizardInDallas
la source
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;
}
Rohit Dubey
la source
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);
irfandar
la source
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.

Laddu Vasanth
la source
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");
Manish
la source
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');
Urvish Joshi
la source
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