web-dev-qa-db-fra.com

Activer et désactiver une div et ses éléments en Javascript

Je cherche une méthode pour activer et désactiver le div id = "dcalc" et ses enfants.

<div id="dcalc" class="nerkheArz"
 style="left: 50px; top: 150px; width: 380px; height: 370px;
 background: #CDF; text-align: center" >
 <div class="nerkh-Arz"></div>
 <div id="calc"> </div>
</div>

Je veux les désactiver au chargement de la page, puis en un clic, je peux les activer?

C'est ce que j'ai essayé

document.getElementById("dcalc").disabled = true;
javascriptjqueryxhtml
62
Emax

Vous devriez pouvoir les définir via les attr() ou prop() dans jQuery comme indiqué ci-dessous:

jQuery (<1.7): 

// This will disable just the div
$("#dcacl").attr('disabled','disabled');

ou 

// This will disable everything contained in the div
$("#dcacl").children().attr("disabled","disabled");

jQuery (> = 1.7): 

// This will disable just the div
$("#dcacl").prop('disabled',true);

ou 

// This will disable everything contained in the div
$("#dcacl").children().prop('disabled',true);

ou 

//  disable ALL descendants of the DIV
$("#dcacl *").prop('disabled',true);

Javascript: 

// This will disable just the div
document.getElementById("dcalc").disabled = true;

ou 

// This will disable all the children of the div
var nodes = document.getElementById("dcalc").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
     nodes[i].disabled = true;
}
144
Rion Williams

Si vous voulez désactiver tous les contrôles de la div, vous pouvez essayer d'ajouter une div transparente sur la div pour la désactiver, vous allez la rendre non cliquable, utilisez également fadeTo pour créer une apparence désactivée.

essaye ça.

$('#DisableDiv').fadeTo('slow',.6);
$('#DisableDiv').append('<div style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');
50
Sergio Ramirez

Ce qui suit sélectionne tous les éléments descendants et les désactive:

$("#dcacl").find("*").prop("disabled", true);

Mais il n’est vraiment utile que de désactiver certains types d’éléments: entrées, boutons, etc., de sorte que vous souhaitiez un sélecteur plus spécifique:

$("#dcac1").find(":input").prop("disabled",true);
// noting that ":input" gives you the equivalent of
$("#dcac1").find("input,select,textarea,button").prop("disabled",true);

Pour réactiver, définissez simplement "désactivé" sur false.

Je veux les désactiver au chargement de la page puis par un clic je peux les activer

OK, mettez donc le code ci-dessus dans un gestionnaire de document prêt et configurez un gestionnaire de clics approprié:

$(document).ready(function() {
    var $dcac1kids = $("#dcac1").find(":input");
    $dcac1kids.prop("disabled",true);

    // not sure what you want to click on to re-enable
    $("selector for whatever you want to click").one("click",function() {
       $dcac1kids.prop("disabled",false);
    }
}

J'ai mis en cache les résultats du sélecteur en supposant que vous n'ajoutez pas plus d'éléments à la division entre le chargement de la page et le clic. Et j'ai attaché le gestionnaire de clics avec .one() puisque vous n'avez pas spécifié d'exigence de réactivation des éléments, il est donc probable que l'événement ne doit être traité qu'une seule fois. Bien sûr, vous pouvez modifier la .one() en .click() si nécessaire.

19
nnnnnn