Désactivation des contrôles dans une table – JQuery / Javascript

J'ai une UI complexe avec plusieurs tables imbriquées, un contrôle de répéteur et plusieurs autres contrôles HTML qui ont leur jeu d'attribut désactivé basé sur la logique métier dans JQuery.

J'ai besoin d'un moyen de désactiver la table entière (y compris les contrôles imbriqués, les éléments d'interface utilisateur, etc.) et réactivez-les lorsqu'un utilisateur bascule un bouton.

Je pourrais itérer à travers les contrôles, trouver chacun d'eux et appliquer l'attribut "disable", mais quand l'utilisateur choisira d'activer, il faudra que je sois confronté au problème de vérifier si chaque contrôle était initialement activé ou non (basé sur La logique commerciale comme expliqué au paragraphe 1)

Tout ce dont j'ai besoin est un moyen de laisser l'UI initiale seule et de superposer la fonctionnalité de désactivation / activation sur l'interface utilisateur.

Y a-t-il un moyen facile d'accomplir cela?

Caisse le plugin blockUI . Vous pouvez mettre une div entre les gris sur toute la table avec elle.

Cela aura le même effet que la désactivation de chaque contrôle de table.

C'est là que les sélecteurs jQuery rockent. Si vous donnez à chacun de ces éléments une classe de "désactiver", vous pouvez sélectionner tous les éléments avec jQuery en effectuant un simple $ (". Disable").

Maintenant que vous avez tous les éléments que vous pouvez faire tout ce que vous voulez avec eux tous à la fois, disons par exemple

$(".disable").attr("disable","disable");

J'utiliserais un div sur une couche sur toute la table, ce qui rendait le "non-cliquable". Cochez le plugin BlockUI pour cela.

Cependant, cela n'empêche pas l'utilisateur de naviguer à travers les éléments d'entrée sous-jacents et les hyperliens avec la touche TAB, puis ils peuvent les invoquer à l'aide de la touche ENTRÉE. Pour éviter cela, vous devez désactiver tous les éléments d'entrée et les ancrages (et les réactiver le cas échéant). Cela peut se faire facilement, bien sûr, en utilisant jQuery …

 // Disable $("#tableIdHere").children(":input, a").attr("disabled", "disabled"); // Enable $("#tableIdHere").children(":input, a").removeAttr("disabled");

Peut-être une approche plus efficace serait de désactiver toute la table au lieu de boucler ses enfants. Je l'ai fait avec succès avant d'utiliser IE, mais je ne sais pas si les résultats seront cohérents dans les navigateurs; Je vais laisser cela à tester …

 $("#tableIdHere").attr("disabled", "disabled");

Si vous choisissez d'écrire votre propre script iterate sur tous les contrôles lors de leur désactivation, vérifiez la valeur désactivée avant de le faire. Pour les contrôles qui ne sont pas désactivés lorsque vous les désactivez, installez-les dans une variable de tableau de niveau fenêtre (ou classe). Ensuite, lorsque vous souhaitez les réactiver, annulez le tableau uniquement, plutôt que tous les contrôles.

Exemple de code de désactivation:

 window.enableList = new Array(); controls = tableElement.getElementsByTagName("input"); // May need to repeat this for "select" and "textarea" for(i = 0; i < controls.length; i++) { control = controls[i]; if(!control.disabled) { control.disabled = true; window.enableList[enableList.length] = control; } }

Exemple de nouveau code de validation:

 for(i = 0; i < window.enableList.length; i++) { window.enableList[i].disabled = false; }

Pour (var i = 0; i <window.enebalelist.length; i ++) {window.enablesList [i] .disable = True;}