วิธีปิดการใช้งานเนื้อหา div ทั้งหมด

ฉันอยู่ภายใต้สมมติฐานว่าหากฉันปิดการใช้งาน div เนื้อหาทั้งหมดก็ถูกปิดการใช้งานด้วย

อย่างไรก็ตามเนื้อหานั้นเป็นสีเทา แต่ฉันยังคงสามารถโต้ตอบกับมันได้

มีวิธีทำเช่นนั้นหรือไม่? (ปิดใช้งาน div และทำให้เนื้อหาทั้งหมดถูกปิดใช้งานด้วย)

คำตอบข้างต้นหลายข้อสามารถใช้ได้กับองค์ประกอบของแบบฟอร์มเท่านั้น วิธีง่ายๆในการปิดใช้งาน DIV ใด ๆ รวมถึงเนื้อหาของมันคือเพียงแค่ปิดใช้งานการโต้ตอบของเมาส์ ตัวอย่างเช่น:

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

CSS

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

ใช้เฟรมเวิร์กอย่าง JQuery เพื่อทำสิ่งต่าง ๆ เช่น:

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

ปิดการใช้งานและเปิดใช้งานองค์ประกอบการป้อนข้อมูลในบล็อก Div การใช้ jQueryจะช่วยคุณได้!

ตั้งแต่ jQuery 1.6 คุณควรใช้.propแทน.attrการปิดการใช้งาน

ฉันแค่อยากจะพูดถึงวิธีการขยายนี้สำหรับการเปิดและปิดการใช้องค์ประกอบ ฉันคิดว่ามันเป็นวิธีที่สะอาดกว่าการเพิ่มและลบแอตทริบิวต์โดยตรง

จากนั้นคุณก็ทำ:

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

นี่คือความคิดเห็นด่วนสำหรับผู้ที่ไม่ต้องการ div แต่เป็นเพียง blockelement ใน HTML5 <fieldset disabled="disabled"></fieldset>มีคุณสมบัติปิดการใช้งาน องค์ประกอบแบบฟอร์มทั้งหมดใน fieldset ที่ปิดใช้งานถูกปิดใช้งาน

แอตทริบิวต์ที่ปิดใช้งานไม่ได้เป็นส่วนหนึ่งของข้อมูลจำเพาะ W3C สำหรับองค์ประกอบ DIVสำหรับองค์ประกอบของฟอร์มเท่านั้น

วิธีการ jQuery ที่แนะนำโดย Martin เป็นวิธีที่ไม่สามารถป้องกันได้เพียงข้อเดียวที่คุณจะทำได้

คล้ายกับโซลูชันของ cletu แต่ฉันมีข้อผิดพลาดในการใช้วิธีแก้ปัญหานี้นี่เป็นวิธีแก้ไข:

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

ทำงานได้ดีกับฉัน

คุณสามารถใช้คำสั่ง CSS ง่าย ๆ นี้เพื่อปิดการใช้งานกิจกรรม

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

ทดสอบเบราว์เซอร์: IE 9, Chrome, Firefox และ 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 สามารถปิดการใช้งานโดยใช้คุณลักษณะ 'ปิดการใช้งาน' ตามที่คุณรู้ เมื่อคุณลักษณะ 'ปิดใช้งาน' สำหรับการควบคุมอินพุตถูกตั้งค่าตัวจัดการเหตุการณ์ที่เกี่ยวข้องกับการควบคุมดังกล่าวจะไม่ถูกเรียกใช้

คุณต้องจำลองพฤติกรรมข้างต้นสำหรับองค์ประกอบ HTML ที่ไม่สนับสนุนแอตทริบิวต์ 'ปิดใช้งาน' เช่น div หากคุณต้องการ

หากคุณมี div และคุณต้องการสนับสนุนคลิกหรือเหตุการณ์สำคัญใน div นั้นคุณต้องทำสองสิ่ง: 1) เมื่อคุณต้องการปิดการใช้งาน div ให้ตั้งค่าคุณลักษณะที่ปิดใช้งานตามปกติ (เพียงเพื่อให้สอดคล้องกับ อนุสัญญา) 2) ในตัวจัดการการคลิกและ / หรือตัวแบ่งคีย์ของ div ของคุณให้ตรวจสอบว่าได้ปิดการใช้งานคุณลักษณะที่ตั้งไว้บน div หากเป็นเช่นนั้นเพียงแค่ไม่สนใจเหตุการณ์การคลิกหรือคีย์ (เช่นกลับมาทันที) หากไม่ได้ตั้งค่าแอตทริบิวต์ที่ปิดใช้งานไว้ให้คลิกและ / หรือตรรกะเหตุการณ์คีย์ของ div

ขั้นตอนข้างต้นเป็นเบราว์เซอร์ที่เป็นอิสระเช่นกัน

วิธีหนึ่งในการบรรลุเป้าหมายนี้คือการเพิ่มเสาปิดการใช้งานให้กับลูกทั้งหมดของ div คุณสามารถทำสิ่งนี้ได้อย่างง่ายดายมาก:

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

$("#myDiv")ค้นหา div .find("*")ทำให้คุณรับโหนดลูกทั้งหมดในทุกระดับและ.prop('disabled', true)ปิดการใช้งานแต่ละโหนด

วิธีนี้ปิดใช้งานเนื้อหาทั้งหมดและคุณไม่สามารถคลิกแท็บเลื่อนดูเนื้อหาเหล่านั้นเป็นต้นนอกจากนี้คุณไม่จำเป็นต้องเพิ่มคลาส css ใด ๆ

ล้อมรอบdivภายในfieldsetแท็ก:

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

ฉันคิดว่าฉันจะชิปในบันทึกสองสาม

1. <div> สามารถปิดการใช้งานใน IE8 / 9 ฉันคิดว่านี่เป็น "ไม่ถูกต้อง" และมันก็โยนฉัน
2. อย่าใช้. RemoveProp () เนื่องจากมีผลกระทบถาวรกับองค์ประกอบ ใช้ .prop ("disabled", false) แทน
3. $ ("# myDiv"). ตัวกรอง ("อินพุต, textarea, เลือก, ปุ่ม"). prop ("ปิดการใช้งาน", จริง) ชัดเจนมากขึ้นและจะจับองค์ประกอบของแบบฟอร์มที่คุณจะพลาดด้วย: อินพุต

นี่สำหรับผู้ค้นหา

สิ่งที่ดีที่สุดที่ฉันทำคือ

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

ดังที่กล่าวไว้ในความคิดเห็นคุณยังคงสามารถเข้าถึงองค์ประกอบโดยการนำทางระหว่างองค์ประกอบโดยใช้ปุ่มแท็บ ดังนั้นฉันแนะนำสิ่งนี้:

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

หากคุณต้องการเก็บความหมายของคนพิการไว้ดังนี้

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

คุณสามารถเพิ่ม CSS ต่อไปนี้

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

ประโยชน์ที่นี่คือคุณไม่ได้ทำงานกับคลาสใน div ที่คุณต้องการทำงานด้วย

ฉันจะใช้ฟังก์ชัน 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');
      }
    });
};

ซึ่งจะเก็บคุณสมบัติ 'ปิดใช้งาน' ดั้งเดิมขององค์ประกอบ

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

วิธีปิดการใช้งานเนื้อหาของ DIV

pointer-eventsคุณสมบัติCSS อย่างเดียวไม่ได้ปิดใช้งานองค์ประกอบลูกจากการเลื่อนและไม่รองรับ IE10 และต่ำกว่าสำหรับองค์ประกอบ DIV (สำหรับ SVG เท่านั้น) http://caniuse.com/#feat=pointer-events

หากต้องการปิดใช้งานเนื้อหาของ DIV บนเบราว์เซอร์ทั้งหมด

javascript:

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

css:

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

หากต้องการปิดใช้งานเนื้อหาของ DIV บนเบราว์เซอร์ทั้งหมดยกเว้น IE10 และใต้

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

ด้านล่างนี้เป็นโซลูชันที่ครอบคลุมยิ่งขึ้นเพื่อปิดบังการเปิดใช้งาน div

• ไม่มี CSS แยกต่างหาก
• ครอบคลุมทั้งหน้าหรือเพียงแค่องค์ประกอบ
• ระบุสีหน้ากากและความทึบ
• ระบุดัชนี Z เพื่อให้คุณสามารถแสดงป๊อปอัปผ่านมาสก์
• แสดงเคอร์เซอร์นาฬิกาทรายบนหน้ากาก
• การลบ masking div บน maksOff เพื่อที่จะสามารถแสดงอันอื่นในภายหลังได้
• หน้ากากยืดเมื่อองค์ประกอบปรับขนาด
• ส่งคืนองค์ประกอบหน้ากากเพื่อให้คุณสามารถจัดสไตล์ได้เป็นต้น

รวมอยู่ด้วยคือ hourglassOn และ hourglassOff ซึ่งสามารถใช้แยกกันได้

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

ด้วยสิ่งนี้คุณสามารถทำเช่น:

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

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

หรือเพียงแค่ใช้ CSS และคลาส "ปิดการใช้งาน"
หมายเหตุ:อย่าใช้แอททริบิวต์ที่ปิดใช้งาน
ไม่จำเป็นต้องยุ่งกับ jQuery เปิด / ปิด
มันง่ายกว่ามากและใช้งานได้กับเบราว์เซอร์ข้าม:

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

จากนั้นคุณสามารถปิดและปิดเมื่อเริ่มต้นหน้าของคุณหรือสลับปุ่ม

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

อีกวิธีหนึ่งใน jQuery จะได้ความสูงภายในความกว้างด้านในและการวางตำแหน่งของ DIV ที่บรรจุอยู่และซ้อนทับ DIV อีกอันหนึ่งโปร่งใสทับด้านบนที่มีขนาดเท่ากัน สิ่งนี้จะทำงานกับองค์ประกอบทั้งหมดภายในคอนเทนเนอร์นั้นแทนที่จะเป็นเพียงอินพุต

จำไว้ว่าเมื่อปิดการใช้งาน JS คุณจะยังสามารถใช้อินพุต / เนื้อหา DIV ได้ เช่นเดียวกันกับคำตอบข้างต้นด้วย

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

css นี้เท่านั้น / noscript solution เพิ่มการซ้อนทับเหนือ fieldset (หรือ div หรือองค์ประกอบอื่น ๆ ) ป้องกันการโต้ตอบ:

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

หากคุณต้องการให้ภาพซ้อนทับแบบโปร่งใสมองไม่เห็นให้ตั้งค่าพื้นหลังเป็นเช่น rgba (128,128,128,0) เนื่องจากจะไม่สามารถทำงานได้หากไม่มีพื้นหลัง การทำงานข้างต้นสำหรับ IE9 + css ที่ง่ายกว่านี้จะทำงานบน IE11 +

[disabled] { pointer-events: none; }

โครเมียม

หากคุณเพียงแค่พยายามหยุดคนคลิกและไม่กังวลเรื่องความปลอดภัยอย่างน่ากลัว - ฉันได้พบ div ที่ถูกวางไว้อย่างสมบูรณ์พร้อมดัชนี z ของ 99999 เรียงลำดับได้ดี คุณไม่สามารถคลิกหรือเข้าถึงเนื้อหาใด ๆ ได้เนื่องจาก div วางอยู่เหนือเนื้อหานั้น อาจจะง่ายกว่านี้อีกเล็กน้อยและเป็นวิธีแก้ปัญหา CSS เท่านั้นจนกว่าคุณจะต้องลบออก

มีไลบรารีจาวาสคริปต์ที่สามารถกำหนดค่าได้ซึ่งใช้ในสตริง html หรือองค์ประกอบ dom และตัดแท็กและแอตทริบิวต์ที่ไม่ต้องการออก เหล่านี้เรียกว่าHTML sanitizers ตัวอย่างเช่น:

• DOMPurify
• บ้า
• sanitize HTML-

เช่นใน DOMPurify

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

แก้ไข: ด้านล่างฉันใช้.on()วิธีแทนใช้.bind()วิธี

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

เพื่อลบการตั้งค่าของคุณคุณสามารถใช้.unbind()วิธีการ ในขณะที่.off()วิธีการไม่ทำงานตามที่คาดไว้

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

หลังจากค้นคว้าวิธีการแก้ปัญหาหลายร้อย! เรียนรู้เกี่ยวกับตัวชี้เหตุการณ์ด้านล่างคือสิ่งที่ฉันทำ

ในฐานะที่เป็น@Kokodokoกล่าวถึงในการแก้ปัญหาของเขาซึ่งเป็น apt สำหรับเบราว์เซอร์ทั้งหมดยกเว้น IE pointer-eventsทำงานในIE11และไม่ทำงานในรุ่นที่ต่ำกว่า ฉันยังสังเกตเห็นในIE11 , ตัวชี้เหตุการณ์ไม่ทำงานกับองค์ประกอบของเด็ก และถ้าเรามีบางอย่างด้านล่าง

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

โดยที่ span - เป็นองค์ประกอบลูกการตั้งค่าpointer-events: noneไม่ทำงาน

เพื่อเอาชนะปัญหานี้ฉันได้เขียนฟังก์ชั่นที่สามารถทำหน้าที่เป็นตัวชี้เหตุการณ์สำหรับ IE และจะทำงานในเวอร์ชันที่ต่ำกว่า

ในไฟล์ JS

DisablePointerEvents(".DisablePointerEvents");


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

ในไฟล์ CSS

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

ในรูปแบบ HTML

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

สิ่งนี้ทำให้pointer-eventsสถานการณ์สมมติที่pointer-eventsไม่ทำงานและเมื่อเงื่อนไขด้านบนขององค์ประกอบลูกเกิดขึ้น

JS Fiddle ในแบบเดียวกัน

https://jsfiddle.net/rpxxrjxh/

โซลูชัน simpleset

ดูตัวเลือกของฉัน

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

the fieldsetUserInfois div มีอินพุตทั้งหมดที่ฉันต้องการปิดใช้งานหรือเปิดใช้

หวังว่านี่จะช่วยคุณได้