Comment désactiver tout le contenu div
Je pensais que si je désactivais une div, tout le contenu était également désactivé.
Cependant, le contenu est grisé mais je peux toujours interagir avec lui.
Y-a-t-il un moyen de faire ça? (Désactivez une div et désactivez également tout le contenu)
Bon nombre des réponses ci-dessus ne fonctionnent que sur des éléments de formulaire. Un moyen simple de désactiver toute DIV, y compris son contenu, consiste simplement à désactiver l’interaction de la souris. Par exemple:
$("#mydiv").addClass("disabledbutton");
css
.disabledbutton {
pointer-events: none;
opacity: 0.4;
}
Utilisez un cadre tel que JQuery pour faire des choses comme:
function toggleStatus() {
if ($('#toggleElement').is(':checked')) {
$('#idOfTheDIV :input').attr('disabled', true);
} else {
$('#idOfTheDIV :input').removeAttr('disabled');
}
}
Désactiver et activer les éléments d'entrée dans un bloc div en utilisant jQuery devrait vous aider!
A partir de jQuery 1.6, vous devez utiliser .prop au lieu de .attr pour le désactiver.
Je voulais juste mentionner cette méthode d'extension pour activer et désactiver des éléments . Je pense que c'est une méthode beaucoup plus simple que d'ajouter et de supprimer des attributs directement.
Ensuite, vous faites simplement:
$("div *").disable();
Voici un commentaire rapide pour les personnes qui n'ont pas besoin d'une div, mais seulement d'un blockelement. En HTML5, <fieldset disabled="disabled"></fieldset> a obtenu l'attribut désactivé. Chaque élément de formulaire dans un fieldset désactivé est désactivé.
L'attribut disabled ne fait pas partie de la spécification W3C pour éléments DIV , uniquement pour éléments de formulaire .
L’approche jQuery suggérée par Martin est la seule façon infaillible d’y parvenir.
similaire à la solution de cletu, mais j'ai eu une erreur en utilisant cette solution, voici la solution de contournement:
$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);
fonctionne bien sur moi
Vous pouvez utiliser cette instruction CSS simple pour désactiver les événements
#my-div {
pointer-events:none;
}
Navigateurs testés: IE 9, Chrome, Firefox et jquery-1.7.1.min.js
$(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);
}
}
Les contrôles d'entrée HTML peuvent être désactivés à l'aide de l'attribut 'disabled', comme vous le savez. Une fois que l'attribut 'disabled' d'un contrôle d'entrée est défini, les gestionnaires d'événements associés à ce contrôle ne sont pas appelés.
Vous devez simuler le comportement ci-dessus pour les éléments HTML qui ne prennent pas en charge l'attribut 'disabled' comme div, si vous le souhaitez.
Si vous avez une div et que vous voulez prendre en charge un clic ou un événement clé sur cette div, vous devez alors effectuer deux choses: 1) Lorsque vous souhaitez désactiver la div, définissez son attribut disabled comme d’habitude convention) 2) Dans les gestionnaires de clics et/ou de clés de votre div, vérifiez si l’attribut disabled est défini sur le div. Si tel est le cas, alors ne tenez pas compte du clic ou de l'événement clé (par exemple, revenez immédiatement). Si l'attribut disabled n'est pas défini, utilisez la logique d'événement de clic et/ou de clé de votre div.
Les étapes ci-dessus sont également indépendantes du navigateur.
Un moyen d'y parvenir consiste à ajouter l'accessoire handicapé à tous les enfants de la div. Vous pouvez y arriver très facilement:
$("#myDiv").find("*").prop('disabled', true);
$("#myDiv") trouve le div, .find("*") vous permet d'obtenir tous les nœuds enfants de tous les niveaux et .prop('disabled', true) les désactive.
De cette façon, tout le contenu est désactivé et vous ne pouvez pas cliquer dessus, y accéder par onglet, les faire défiler, etc. De plus, vous n'avez pas besoin d'ajouter de classes css.
wrpa the div avec la balise fieldset
<fieldset disabled>
<div>your controls</div>
</fieldset>
Je pensais y ajouter quelques notes.
- <div> peut être désactivé dans IE8/9. Je suppose que c'est "incorrect", et ça m'a jeté
- N'utilisez pas .removeProp (), cela aurait un effet permanent sur l'élément. Utilisez .prop ("disabled", false) à la place
- $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("disabled", true) est plus explicite et interceptera certains éléments de formulaire que vous auriez manqués avec: input
Si vous voulez conserver la sémantique de handicap comme suit
<div disabled="disabled"> Your content here </div>
vous pouvez ajouter le CSS suivant
div[disabled=disabled] {
pointer-events: none;
opacity: 0.4;
}
l'avantage est que vous ne travaillez pas avec des classes de la div avec lesquelles vous voulez travailler.
Comme mentionné dans les commentaires, vous pouvez toujours accéder à l'élément en naviguant entre les éléments à l'aide de la touche de tabulation. alors je recommande ceci:
$("#mydiv")
.css({"pointer-events" : "none" , "opacity" : "0.4"})
.attr("tabindex" , "-1");
Ceci est pour les chercheurs
Le mieux que j'ai fait est,
$('#myDiv *').attr("disabled", true);
$('#myDiv *').fadeTo('slow', .6);
Comment désactiver le contenu d'une DIV
La propriété CSS pointer-events ne permet pas à elle seule de désactiver le défilement des éléments enfants et n'est pas prise en charge par IE10 et les éléments DIV inférieurs (uniquement pour SVG). http://caniuse.com/#feat=pointer-events
Pour désactiver le contenu d'une DIV sur tous les navigateurs.
Javascript:
$("#myDiv")
.addClass("disable")
.click(function () {
return false;
});
Css:
.disable {
opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
overflow: hidden;
}
Pour désactiver le contenu d'une DIV sur tous les navigateurs, sauf IE10 et les versions antérieures.
Javascript:
$("#myDiv").addClass("disable");
Css:
.disable {
// Note: pointer-events not supported by IE10 and under
pointer-events: none;
opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
overflow: hidden;
}
function disableItems(divSelector){
var disableInputs = $(divSelector).find(":input").not("[disabled]");
disableInputs.attr("data-reenable", true);
disableInputs.attr("disabled", true);
}
function reEnableItems(divSelector){
var reenableInputs = $(divSelector).find("[data-reenable]");
reenableInputs.removeAttr("disabled");
reenableInputs.removeAttr("data-reenable");
}
Ou utilisez simplement css et une classe "désactivée".
Remarque: n'utilisez pas l'attribut disabled.
Pas besoin de jouer avec jQuery on/off.
C'est beaucoup plus facile et fonctionne avec plusieurs navigateurs:
.disabled{
position: relative;
}
.disabled:after{
content: "";
position: absolute;
width: 100%;
height: inherit;
background-color: rgba(0,0,0,0.1);
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Ensuite, vous pouvez l’allumer et l’éteindre lors de l’initialisation de votre page ou du basculement d’un bouton.
if(myDiv !== "can be edited"){
$('div').removeClass('disabled');
} else{
$('div').addClass('disabled');
}
J'utiliserais une version améliorée de la fonction de Cletus:
$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") {
$(this).data('jquery.disabled', this.disabled);
this.disabled = true;
}
});
};
$.fn.enable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") {
this.disabled = $(this).data('jquery.disabled');
}
});
};
Qui stocke la propriété originale 'disabled' de l'élément.
$('#myDiv *').disable();
Vous trouverez ci-dessous une solution plus complète permettant de masquer les divs.
- pas de CSS séparé
- couvrir toute la page ou juste un élément
- spécifier la couleur et l'opacité du masque
- spécifiez l'index Z pour pouvoir afficher des popups sur le masque
- montre un curseur en sablier sur le masque
- enlever le div de masquage sur maksOff afin qu'un autre puisse être montré plus tard
- masque d'étirement lorsque l'élément redimensionne
- retourne l'élément masque pour pouvoir le styler, etc.
HourglassOn et hourglassOff peuvent également être utilisés séparément.
// elemOrId - jquery element or element id, defaults to $('<body>')'
// settings.color defaults to 'transparent'
// settings.opacity defaults to 1
// settings.zIndex defaults to 2147483647
// if settings.hourglasss==true change cursor to hourglass over mask
function maskOn(elemOrId, settings) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
var maskDiv=elem.data('maskDiv');
if (!maskDiv) {
maskDiv=$('<div style="position:fixed;display:inline"></div>');
$('body').append(maskDiv);
elem.data('maskDiv', maskDiv);
}
if (typeof settings==='undefined' || settings===null) settings={};
if (typeof settings.color==='undefined' || settings.color===null) settings.color='transparent';
if (typeof settings.opacity==='undefined' || settings.opacity===null) settings.opacity=1;
if (typeof settings.zIndex==='undefined' || settings.zIndex===null) settings.zIndex=2147483647;
if (typeof settings.hourglass==='undefined' || settings.hourglass===null) settings.hourglass=false;
// stretch maskdiv over elem
var offsetParent = elem.offsetParent();
var widthPercents=elem.outerWidth()*100/offsetParent.outerWidth()+'%';
var heightPercents=elem.outerHeight()*100/offsetParent.outerHeight()+'%';
maskDiv.width(widthPercents);
maskDiv.height(heightPercents);
maskDiv.offset($(elem).offset());
// set styles
maskDiv[0].style.backgroundColor = settings.color;
maskDiv[0].style.opacity = settings.opacity;
maskDiv[0].style.zIndex = settings.zIndex;
if (settings.hourglass) hourglassOn(maskDiv);
return maskDiv;
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
function maskOff(elemOrId) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
var maskDiv=elem.data('maskDiv');
if (!maskDiv) {
console.log('maskOff no mask !');
return;
}
elem.removeData('maskDiv');
maskDiv.remove();
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
// if decendents is true also shows hourglass over decendents of elemOrId, defaults to true
function hourglassOn(elemOrId, decendents) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
if (typeof decendents==='undefined' || decendents===null) decendents=true;
if ($('style:contains("hourGlass")').length < 1) $('<style>').text('.hourGlass { cursor: wait !important; }').appendTo('head');
if ($('style:contains("hourGlassWithDecendents")').length < 1) $('<style>').text('.hourGlassWithDecendents, .hourGlassWithDecendents * { cursor: wait !important; }').appendTo('head');
elem.addClass(decendents ? 'hourGlassWithDecendents' : 'hourGlass');
}
// elemOrId - jquery element or element id, defaults to $('<body>')'
function hourglassOff(elemOrId) {
var elem=elemFromParam(elemOrId);
if (!elem) return;
elem.removeClass('hourGlass');
elem.removeClass('hourGlassWithDecendents');
}
function elemFromParam(elemOrId) {
var elem;
if (typeof elemOrId==='undefined' || elemOrId===null)
elem=$('body');
else if (typeof elemOrId === 'string' || elemOrId instanceof String)
elem=$('#'+elemOrId);
else
elem=$(elemOrId);
if (!elem || elem.length===0) {
console.log('elemFromParam no element !');
return null;
}
return elem;
}
Avec cela, vous pouvez faire par exemple:
maskOn(); // transparent page mask
maskOn(null, {color:'gray', opacity:0.8}); // gray page mask with opacity
maskOff(); // remove page mask
maskOn(div); // transparent div mask
maskOn(divId, {color:'gray', hourglass:true}); // gray div mask with hourglass
maskOff(div); // remove div mask
voir jsfiddle
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);
Cette solution css only/noscript ajoute une superposition au-dessus d'un fieldset (ou d'un div ou de tout autre élément), empêchant ainsi toute interaction:
fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }
Si vous souhaitez une superposition invisible, c'est-à-dire transparente, définissez l'arrière-plan sur par exemple. rgba (128,128,128,0), car cela ne fonctionnera pas sans arrière-plan. Ce qui précède fonctionne pour IE9 +. Le css beaucoup plus simple suivant fonctionnera sur IE11 +
[disabled] { pointer-events: none; }
Chrome
Si vous essayez simplement d'empêcher les gens de cliquer et que vous n'êtes pas effrayé par la sécurité, j'ai trouvé un div absolu placé avec un z-index de 99999 qui convient très bien. Vous ne pouvez pas cliquer ou accéder au contenu car le div est placé dessus. Pourrait être un peu plus simple et est une solution uniquement CSS jusqu'à ce que vous deviez le supprimer.
Une autre manière, dans jQuery, serait d’obtenir la hauteur interne, la largeur interne et le positionnement de la DIV conteneur, et de simplement superposer une autre DIV transparente sur la même taille. Cela fonctionnera sur tous les éléments à l'intérieur de ce conteneur, au lieu des seules entrées.
Rappelez-vous cependant que, avec JS désactivé, vous pourrez toujours utiliser les entrées/contenus des DIV. La même chose va avec les réponses ci-dessus aussi.
la solution simpleset
regarde mon sélecteur
$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);
la fieldsetUserInfo is div contient toutes les entrées que je souhaite désactiver ou activer.
espérons que cela vous aide