Cara menonaktifkan semua konten div

Saya berasumsi bahwa jika saya menonaktifkan div, semua konten juga akan dinonaktifkan.

Namun, kontennya berwarna abu-abu tetapi saya masih bisa berinteraksi dengannya.

Apakah ada cara untuk melakukan itu? (nonaktifkan div dan nonaktifkan semua konten juga)

Banyak jawaban di atas hanya bekerja pada elemen formulir. Cara sederhana untuk menonaktifkan DIV termasuk kontennya adalah dengan menonaktifkan interaksi mouse. Sebagai contoh:

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

css

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

Gunakan kerangka kerja seperti JQuery untuk melakukan hal-hal seperti:

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

Nonaktifkan Dan Aktifkan Elemen Input Dalam Blok Div ​​Menggunakan jQuery akan membantu Anda!

Pada jQuery 1.6, Anda harus menggunakan .propalih-alih .attrmenonaktifkan.

Saya hanya ingin menyebutkan metode ekstensi ini untuk mengaktifkan dan menonaktifkan elemen . Saya pikir ini cara yang jauh lebih bersih daripada menambahkan dan menghapus atribut secara langsung.

Maka Anda cukup melakukan:

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

Berikut adalah komentar cepat untuk orang-orang yang tidak membutuhkan div tetapi hanya blockelement. Di HTML5 <fieldset disabled="disabled"></fieldset>mendapat atribut yang dinonaktifkan. Setiap elemen formulir dalam bidang yang dinonaktifkan dinonaktifkan.

Atribut yang dinonaktifkan bukan bagian dari spesifikasi W3C untuk elemen DIV , hanya untuk elemen formulir .

Pendekatan jQuery yang disarankan oleh Martin adalah satu-satunya cara yang sangat mudah untuk mencapai ini.

mirip dengan solusi cletu, tetapi saya mendapat kesalahan menggunakan solusi itu, ini solusinya:

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

bekerja dengan baik pada saya

Anda dapat menggunakan pernyataan CSS sederhana ini untuk menonaktifkan acara

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

Browser yang diuji: IE 9, Chrome, Firefox dan 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);
        }
    }

Kontrol masukan HTML dapat dinonaktifkan menggunakan atribut 'dinonaktifkan' seperti yang Anda ketahui. Setelah atribut 'dinonaktifkan' untuk kontrol input diatur, penangan peristiwa yang terkait dengan kontrol tersebut tidak dipanggil.

Anda harus mensimulasikan perilaku di atas untuk elemen HTML yang tidak mendukung atribut 'dinonaktifkan' seperti div, jika Anda mau.

Jika Anda memiliki div, dan Anda ingin mendukung klik atau acara utama pada div itu, maka Anda harus melakukan dua hal: 1) Ketika Anda ingin menonaktifkan div, atur atribut yang dinonaktifkan seperti biasa (hanya untuk mematuhi konvensi) 2) Dalam klik div Anda dan / atau penangan kunci, periksa apakah atribut yang dinonaktifkan ditetapkan pada div tersebut. Jika ya, abaikan saja peristiwa klik atau kunci (mis. Kembalikan segera). Jika atribut yang dinonaktifkan tidak disetel, maka lakukan klik div dan / atau logika peristiwa utama Anda.

Langkah-langkah di atas juga tidak tergantung pada browser.

Salah satu cara untuk mencapai hal ini adalah dengan menambahkan alat bantu yang dinonaktifkan untuk semua anak div. Anda dapat mencapai ini dengan sangat mudah:

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

$("#myDiv")menemukan div, .find("*")membuat Anda semua simpul anak di semua tingkatan dan .prop('disabled', true)menonaktifkan masing-masing.

Dengan cara ini semua konten dinonaktifkan dan Anda tidak dapat mengekliknya, tabnya, gulir, dll. Selain itu, Anda tidak perlu menambahkan kelas css.

Bungkus divdalam fieldsettag:

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

Saya pikir saya akan membuat beberapa catatan.

1. <div> dapat dinonaktifkan di IE8 / 9. Saya berasumsi ini "salah", dan itu membuat saya kesal
2. Jangan gunakan .removeProp (), karena memiliki efek permanen pada elemen. Gunakan .prop ("dinonaktifkan", salah) sebagai gantinya
3. $ ("# myDiv"). filter ("input, textarea, pilih, tombol"). prop ("dinonaktifkan", true) lebih eksplisit dan akan menangkap beberapa elemen bentuk yang akan Anda lewatkan dengan: input

Ini untuk para pencari,

Yang terbaik yang saya lakukan adalah,

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

Seperti disebutkan dalam komentar, Anda masih dapat mengakses elemen dengan menavigasi antar elemen dengan menggunakan tombol tab. jadi saya merekomendasikan ini:

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

Jika Anda ingin menjaga semantik dinonaktifkan sebagai berikut

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

Anda bisa menambahkan CSS berikut

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

manfaatnya di sini adalah Anda tidak bekerja dengan kelas di div yang ingin Anda ajak bekerja sama

Saya akan menggunakan versi perbaikan fungsi 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');
      }
    });
};

Yang menyimpan properti 'cacat' asli elemen.

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

Cara menonaktifkan konten DIV

pointer-eventsProperti CSS saja tidak menonaktifkan elemen anak dari pengguliran, dan itu tidak didukung oleh IE10 dan di bawah untuk elemen DIV (hanya untuk SVG). http://caniuse.com/#feat=pointer-events

Untuk menonaktifkan konten DIV pada semua browser.

Javascript:

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

Css:

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

Untuk menonaktifkan konten DIV di semua browser, kecuali IE10 dan di bawah.

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

Di bawah ini adalah solusi yang lebih komprehensif untuk mengaktifkan divs masking

• tidak ada CSS terpisah
• tutupi seluruh halaman atau hanya sebuah elemen
• tentukan warna dan opacity mask
• tentukan Z-index sehingga Anda dapat menampilkan munculan di atas topeng
• perlihatkan kursor jam pasir di atas topeng
• menghapus div masking pada maksOff sehingga yang berbeda dapat ditampilkan nanti
• regangkan masker saat elemen diubah ukurannya
• kembalikan elemen topeng sehingga Anda dapat menata gaya tersebut dll

Termasuk juga adalah hourglassOn dan hourglassOff yang dapat digunakan secara terpisah

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

Dengan ini bisa Anda lakukan misalnya:

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

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

Atau cukup gunakan css dan kelas "cacat".
Catatan: jangan gunakan atribut yang dinonaktifkan.
Tidak perlu dipusingkan dengan jQuery on / off.
Ini jauh lebih mudah dan berfungsi lintas browser:

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

Kemudian Anda dapat mematikan dan mematikannya saat menginisialisasi halaman Anda, atau mengubah tombol

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

Cara lain, di jQuery, adalah untuk mendapatkan tinggi bagian dalam, lebar bagian dalam dan posisi dari DIV yang berisi, dan hanya melapisi DIV lain, transparan, di atas ukuran yang sama. Ini akan bekerja pada semua elemen di dalam wadah itu, bukan hanya input.

Ingat juga, dengan JS dinonaktifkan, Anda masih dapat menggunakan input / konten DIV. Hal yang sama berlaku dengan jawaban di atas juga.

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

Solusi css / noscript ini hanya menambahkan overlay di atas fieldset (atau div atau elemen lain), mencegah interaksi:

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

Jika Anda menginginkan overlay transparan yang tak terlihat, atur latar belakang ke mis rgba (128.128.128,0), karena itu tidak akan berfungsi tanpa latar belakang. Di atas berfungsi untuk IE9 +. Css yang jauh lebih sederhana berikut ini akan berfungsi pada IE11 +

[disabled] { pointer-events: none; }

Chrome

Jika Anda hanya mencoba untuk menghentikan orang mengklik dan tidak terlalu khawatir tentang keamanan - Saya telah menemukan div ditempatkan mutlak dengan indeks-z 99999 macam itu baik-baik saja. Anda tidak dapat mengklik atau mengakses konten apa pun karena div diletakkan di atasnya. Mungkin sedikit lebih sederhana dan merupakan solusi hanya CSS hingga Anda perlu menghapusnya.

Ada pustaka javascript yang dapat dikonfigurasi yang mengambil string html atau elemen dom dan menghapus tag dan atribut yang tidak diinginkan. Ini dikenal sebagai html sanitizers . Sebagai contoh:

• DOMPurify
• Gila
• membersihkan-html

Misalnya Di DOMPurify

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

EDIT: Di bawah ini saya telah menggunakan .on()metode, alih-alih menggunakan .bind()metode

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

untuk menghapus pengaturan Anda, Anda dapat menggunakan .unbind()metode. Padahal .off()metode ini tidak berfungsi seperti yang diharapkan.

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

Setelah meneliti ratusan solusi! belajar tentang pointer-events, di bawah ini adalah apa yang saya lakukan.

Seperti @Kokodoko disebutkan dalam solusinya yang cocok untuk semua browser kecuali IE. pointer-eventsbekerja di IE11 dan bukan di versi yang lebih rendah. Saya juga perhatikan di IE11 , pointer-events tidak berfungsi pada elemen anak. Dan karenanya jika kita memiliki sesuatu seperti di bawah ini

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

di mana span -adalah elemen anak , pengaturan pointer-events: nonetidak akan bekerja

Untuk mengatasi masalah ini saya menulis sebuah fungsi yang dapat bertindak sebagai pointer-events untuk IE dan akan bekerja di versi yang lebih rendah.

Dalam File JS

DisablePointerEvents(".DisablePointerEvents");


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

Dalam File CSS

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

Dalam HTML

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

Ini memalsukan pointer-eventsskenario di mana pointer-eventstidak berfungsi dan ketika kondisi di atas elemen anak terjadi.

JS Fiddle untuk hal yang sama

https://jsfiddle.net/rpxxrjxh/

solusi simpleset

lihat pemilih saya

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

yang fieldsetUserInfoadalah div berisi semua masukan saya ingin dinonaktifkan atau Aktifkan

Semoga ini bisa membantu Anda