Comment bloquer temporairement les éléments sélectionnables

Question

Je travaille sur un menu contextuel sur ma page Web. Le menu contient divers éléments sélectionnables, et je voudrais seulement permettre la sélection de certains éléments après qu'une sélection supérieure a été faite. Maintenant, je pourrais cacher tous les éléments plus bas, mais cela rendrait le popup bizarre. Je préférerais les montrer, mais estompé. Mon idée était d'inclure les sélections de suivi dans un div, et que cette div agisse comme un bloqueur. Maintenant, la question est de savoir comment le faire - j'ai essayé de placer l'index z du selBlocker div plus haut que le reste, aussi pour lui donner un positionnement absolu, mais je n'ai pas encore réussi à le faire. J'utilise une bibliothèque javascript pour gérer les sélections en général.

<div id="SelPopup" > 
    <div id="topSelect"></div> 

    <div id="selBlocker"> 
     <div id="selectable2"></div> 
     <div id="selectable3"></div> 
    </div> 
</div> 

Answer 1

Merci à tous pour les suggestions, j'ai effectivement trouvé à que je cherchais:

$("#selBlocker").css("pointer-events", "none"); 

Cela désactivera bien toutes les interactions, et avec

$("#selBlocker").css("pointer-events", "all"); 

Je peux restaurer. Peut ajouter le changement d'opacité facilement à côté d'elle.

Answer 2

j'ajouter une classe aux éléments que vous ne voulez sélectionner et ajouter le sélecteur non() à votre jQuery.

Par exemple:

$("div:not('.selected')..... 

Au lieu de

$("div")..... 

Ofcourse vous pouvez ajouter une opacité à la classe .selected, pour le rendre un peu moins visible.

Answer 3

Vous pouvez ci-dessous:

Au lieu d'utiliser id pour la sélection élément bloqué utiliser class="selectBlocked" et pour le menu utilisation div class="selectMenu"

<div id="SelPopup" > 
    <div id="topSelect" class="selectMenu"></div> 

    <div id="selBlocker1" class="selectMenu selectBlocked"> 
     <div id="selectable2"></div> 
     <div id="selectable3"></div> 
    </div> 
    <div id="selBlocker4" class="selectMenu selectBlocked"> 
     <div id="selectable5"></div> 
     <div id="selectable6"></div> 
    </div> 
</div> 

right jQuery pour gérer la sélection de menu et ne rien faire si le menu sélectionné est avec class = "selectBlocked"

$('.selectMenu').click(function(){ 
    if($(this).hasClass("selectBlocked")) 
     return false; 

    // do your stuff if above condition fails 
});