web-dev-qa-db-fra.com

désactiver tous les éléments de formulaire dans div

existe-t-il un moyen de désactiver tous les champs (textarea/textfield/option/input/checkbox/submit, etc.) d'un formulaire en indiquant uniquement le nom de la division parent dans jquery/javascript?

jqueryformshtmlfield
146
amirash

Essayez d’utiliser le sélecteur :input , avec un sélecteur parent:

$("#parent-selector :input").attr("disabled", true);
247
Andrew Whitaker
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');
144
Trevor

Pour la version 1.6+, utilisez .prop() au lieu de .attr() ,

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

ou

$("#parent-selector :input").attr("disabled", "disabled");
29
Optimus Prime
    $(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);
        }
    }
5
Syed Nasir Abbas

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

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

J'utilise la fonction ci-dessous à différents moments. Fonctionne dans un élément div ou un élément d'un tableau tant que le sélecteur de droite est utilisé. Juste ": 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");
    }
}
1
AWizardInDallas

La suite désactivera toutes les entrées mais ne pourra pas btn class et ajoutera également la 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
Rohit Dubey

Pour moi, la réponse acceptée ne fonctionnait pas car j'avais des champs cachés asp net qui ont également été désactivés. J'ai donc choisi uniquement de désactiver 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
irfandar

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

Vous pouvez également ajouter le nom de la classe dans la balise HTML .

0
Laddu Vasanth

Pourquoi ne pas atteindre cet objectif 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>

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

$('fieldset').attr('disabled', 'disabled');
0
طلحة

Seulement le type de texte

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

Type de mot de passe uniquement

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

Type de courrier électronique uniquement

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