Tüm div içeriği nasıl devre dışı bırakılır

Bir div'ı devre dışı bırakırsam, tüm içeriğin de devre dışı bırakıldığı varsayımı altındaydım.

Ancak, içerik gridir, ancak yine de onunla etkileşime girebilirim.

Bunu yapmanın bir yolu var mı? (div öğesini devre dışı bırakın ve tüm içeriği devre dışı bırakın)

Yukarıdaki cevapların çoğu sadece form öğeleri üzerinde çalışır. İçeriği de dahil olmak üzere herhangi bir DIV'yi devre dışı bırakmanın basit bir yolu, fare etkileşimini devre dışı bırakmaktır. Örneğin:

$("#mydiv").addClass("disabledbutton");

css

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

JQuery gibi bir çerçeve kullanarak aşağıdakileri yapın:

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').attr('disabled', true);
    } else {
        $('#idOfTheDIV :input').removeAttr('disabled');
    }   
}

JQuery kullanarak Div ​​Bloğundaki Giriş Öğelerini Devre Dışı Bırakma ve Etkinleştirme size yardımcı olacaktır!

JQuery 1.6 ile kullanmanız gerektiğini .propyerine .attrdevre dışı bırakmak için.

Öğeleri etkinleştirmek ve devre dışı bırakmak için bu uzantı yönteminden bahsetmek istedim . Bence öznitelikleri doğrudan eklemek ve kaldırmaktan çok daha temiz bir yol.

Sonra sadece şunları yaparsınız:

$("div *").disable();

İşte bir div'a değil, sadece bir ablukaya ihtiyaç duyan insanlar için hızlı bir yorum. HTML5'te <fieldset disabled="disabled"></fieldset>devre dışı özniteliği var. Devre dışı bırakılmış bir alan kümesindeki her form öğesi devre dışı bırakılır.

Devre dışı bırakılan öznitelik, DIV öğeleri için W3C spesifikasyonunun bir parçası değildir , yalnızca form öğeleri .

Martin tarafından önerilen jQuery yaklaşımı bunu başarmanın tek kusursuz yoludur.

cletu'nun çözümüne benzer, ancak bu çözümü kullanarak bir hata aldım, bu geçici çözüm:

$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);

benim için iyi çalışıyor

Etkinlikleri devre dışı bırakmak için bu basit CSS deyimini kullanabilirsiniz

#my-div {
    pointer-events:none;
}

Test edilen tarayıcılar: IE 9, Chrome, Firefox ve 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);
        }
    }

HTML giriş denetimleri, bildiğiniz gibi 'devre dışı' özelliği kullanılarak devre dışı bırakılabilir. Giriş denetimi için 'devre dışı' özniteliği ayarlandıktan sonra, bu denetimle ilişkili olay işleyicileri çağrılmaz.

İsterseniz div gibi 'devre dışı' özelliğini desteklemeyen HTML öğeleri için yukarıdaki davranışı simüle etmeniz gerekir.

Bir div'niz varsa ve bu div'de tıklamayı veya önemli bir etkinliği desteklemek istiyorsanız, iki şey yapmanız gerekir: 1) div'ı devre dışı bırakmak istediğinizde, devre dışı özelliğini her zamanki gibi ayarlayın (yalnızca kural) 2) Div'inizin tıklama ve / veya anahtar işleyicilerinde div'de devre dışı bırakılmış özniteliğin ayarlanıp ayarlanmadığını kontrol edin. Öyleyse, tıklama veya anahtar etkinliğini dikkate almayın (örn. Hemen geri dönün). Devre dışı bırakılmış öznitelik ayarlanmamışsa, div'inizin tıklama ve / veya anahtar olay mantığını yapın.

Yukarıdaki adımlar da tarayıcıdan bağımsızdır.

Bunu başarmanın bir yolu, engelli pervaneyi div'ın tüm çocuklarına eklemektir. Bunu kolayca yapabilirsiniz:

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

$("#myDiv")div'ı bulur, .find("*")tüm seviyelerdeki tüm alt düğümleri alır ve .prop('disabled', true)her birini devre dışı bırakır.

Bu şekilde tüm içerik devre dışı bırakılır ve bunları tıklayamaz, sekme atamaz, kaydırmaz vb. Ayrıca css sınıfları eklemenize gerek yoktur.

Sarın divbir dahilinde fieldsetetiketi:

<fieldset disabled>
<div>your controls</div>
</fieldset>

Birkaç nota çipleyeceğimi düşündüm.

1. <div> IE8 / 9'da devre dışı bırakılabilir. Bunun "yanlış" olduğunu varsayıyorum ve beni attı
2. .RemoveProp () öğesini kullanmayın, çünkü öğe üzerinde kalıcı bir etkisi vardır. Bunun yerine .prop ("devre dışı", yanlış) kullanın
3. $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("devre dışı", true) daha açıktır ve kaçırdığınız bazı form öğelerini yakalar: input

Bu araştırmacılar için,

Yaptığım en iyi şey,

$('#myDiv *').attr("disabled", true);                   
$('#myDiv *').fadeTo('slow', .6);

Yorumlarda belirtildiği gibi, sekme tuşunu kullanarak öğeler arasında dolaşarak öğeye erişmeye devam edebilirsiniz. bu yüzden bunu tavsiye ederim:

$("#mydiv")
  .css({"pointer-events" : "none" , "opacity" :  "0.4"})
  .attr("tabindex" , "-1");

Engelli semantiğini aşağıdaki gibi tutmak istiyorsanız

<div disabled="disabled"> Your content here </div>

aşağıdaki CSS'yi ekleyebilirsiniz

div[disabled=disabled] {
  pointer-events: none;
  opacity: 0.4;
}

Buradaki fayda, çalışmak istediğiniz div'de derslerle çalışmamanızdır.

Cletus'un fonksiyonunun geliştirilmiş bir versiyonunu kullanırdım:

 $.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');
      }
    });
};

Öğenin orijinal 'devre dışı' özelliğini depolayan.

$('#myDiv *').disable();

DIV içeriği nasıl devre dışı bırakılır

Yalnızca CSS pointer-eventsözelliği alt öğelerin kaydırılmasını devre dışı bırakmaz ve IE10 ve altı tarafından DIV öğeleri için desteklenmez (yalnızca SVG için). http://caniuse.com/#feat=pointer-events

Tüm tarayıcılarda DIV içeriğini devre dışı bırakmak için.

JavaScript:

$("#myDiv")
  .addClass("disable")
  .click(function () {
    return false;
  });

css:

.disable {
  opacity: 0.4;
}
// Disable scrolling on child elements
.disable div,
.disable textarea {
  overflow: hidden;
}

IE10 ve altı hariç tüm tarayıcılarda DIV içeriğini devre dışı bırakmak için.

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;
}

Aşağıda div'ları maskeleme için daha kapsamlı bir çözüm

• ayrı CSS yok
• tüm sayfayı veya sadece bir öğeyi kapsar
• maske rengini ve opaklığını belirtin
• maske üzerinde pop-up'lar gösterebilmek için Z-endeksini belirtin
• maskenin üzerinde bir kum saati imleci göster
• daha sonra farklı bir tane gösterilebilmesi için maksOff üzerindeki maskeleme div'inin çıkarılması
• eleman yeniden boyutlandırıldığında maskeyi uzat
• maske elemanını iade edin, böylece stil vb.

Ayrıca ayrı olarak kullanılabilen kum saati Açık ve kum saati Kapalı

// 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;
}

Bununla örneğin şunları yapabilirsiniz:

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

bkz. jsfiddle

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");
}

Veya sadece css ve bir "devre dışı" sınıfı kullanın.
Not: devre dışı niteliğini kullanma.
Gerek yok jQuery açık / kapalı ile karışıklık.
Bu çok daha kolay ve çapraz tarayıcıda çalışır:

.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;
}

Ardından sayfanızı başlatırken veya bir düğme arasında geçiş yaparken kapatıp açabilirsiniz.

if(myDiv !== "can be edited"){
    $('div').removeClass('disabled');
} else{
    $('div').addClass('disabled');
}

Başka bir yol, jQuery'de, ihtiva eden DIV'nin iç yüksekliğini, iç genişliğini ve konumlandırmasını elde etmek ve aynı boyutun üstünde şeffaf bir başka DIV'nin üzerine bindirmek olacaktır. Bu, yalnızca girdiler yerine o kabın içindeki tüm öğeler üzerinde çalışır.

Yine de, JS devre dışı bırakıldığında, DIV girişlerini / içeriğini kullanmaya devam edebileceğinizi unutmayın. Aynı şey yukarıdaki cevaplar için de geçerlidir.

$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);

Bu yalnızca css / noscript çözümü, bir alan kümesinin (veya div veya başka bir öğenin) üstüne bindirme ekleyerek etkileşimi önler:

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

Görünmez yani şeffaf bir yer paylaşımı istiyorsanız, arka planı örneğin rgba (128,128,128,0) olarak ayarlayın, çünkü arka plan olmadan çalışmaz. Yukarıdaki IE9 + için çalışır. Aşağıdaki çok daha basit css IE11 + üzerinde çalışacaktır

[disabled] { pointer-events: none; }

Krom

Sadece insanları tıklamayı durdurmaya çalışıyorsanız ve güvenlik konusunda korkunç bir şekilde endişelenmiyorsanız - 99999'luk bir z-endeksi ile mutlak bir yerleştirilmiş div buldum. Div içeri yerleştirildiği için içeriğin üzerine tıklayamaz veya erişemezsiniz. Biraz daha basit olabilir ve kaldırmanız gerekene kadar tek CSS çözümüdür.

Bir html dizesi veya dom öğesi alan ve istenmeyen etiketleri ve nitelikleri çıkaran yapılandırılabilir javascript kütüphaneleri vardır. Bunlar html dezenfektanları olarak bilinir . Örneğin:

• DOMPurify
• deli
• mikroptan arindirilir-html

Örneğin, DOMPurify'da

DOMPurify.sanitize('<div>abc<iframe//src=jAva&Tab;script:alert(3)>def</div>'); 
// becomes <div>abcdef</div>

EDIT: aşağıda .on()yöntemi kullandım , yerine .bind()yöntemi kullanın

$(this).bind('click', false);
$(this).bind('contextmenu', false);

ayarınızı kaldırmak için .unbind()yöntemi kullanabilirsiniz . Oysa .off()yöntem beklendiği gibi çalışmaz.

 $(this).unbind('click', false);
 $(this).unbind('contextmenu', false);

Yüzlerce çözümü araştırdıktan sonra! işaretçi olayları öğrenmek, aşağıda yaptığım şey.

@Kokodoko'nun IE dışındaki tüm tarayıcılar için uygun olan çözümünde belirttiği gibi . IE11'depointer-events çalışır , alt sürümlerde olmaz. Ayrıca IE11'de , işaretçi olayları alt öğeler üzerinde çalışmadığını fark ettim . Ve böylece aşağıdaki gibi bir şeyimiz varsa

 <a href="www.preshmalinetpereira.wordpress.com"><i class="car icon"></i><span>My Blog</span></a>

yayılma alanı - alt öğe , ayar pointer-events: noneçalışmaz

Bu sorunun üstesinden gelmek için IE için pointer-olaylar olarak hareket edebilen ve daha düşük versiyonlarda çalışacak bir fonksiyon yazdım.

JS Dosyasında

DisablePointerEvents(".DisablePointerEvents");


function DisablePointerEvents(classId) {
    $(classId).each(function () {
        $(this).on('click', false );
        $(this).on('contextmenu', false );
    });
}

CSS Dosyasında

.DisablePointerEvents{
    pointer-events: none;
    opacity: 0.7;
    cursor: default;
}

HTML'de

 <a href="www.preshmalinetpereira.wordpress.com" class="DisablePointerEvents"><i class="car icon"></i><span>My Blog</span></a>

Bu, çalışmayan ve yukarıdaki çocuk elemanlarının durumunun ortaya çıktığı pointer-eventssenaryoyu taklit etti pointer-events.

Aynısı için JS Fiddle

https://jsfiddle.net/rpxxrjxh/

basit çözüm

seçicime bak

$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);

fieldsetUserInfodiv ben engelli ya Enable isteyen tüm girdileri içerir

umarım bu sana yardımcı olur