Cách tắt tất cả nội dung div

Tôi đã giả định rằng nếu tôi vô hiệu hóa div, tất cả nội dung cũng bị vô hiệu hóa.

Tuy nhiên, nội dung có màu xám nhưng tôi vẫn có thể tương tác với nó.

Có cách nào làm được việc này không? (vô hiệu hóa một div và cũng bị vô hiệu hóa tất cả nội dung)

Nhiều câu trả lời trên chỉ hoạt động trên các yếu tố hình thức. Một cách đơn giản để vô hiệu hóa bất kỳ DIV nào kể cả nội dung của nó là chỉ vô hiệu hóa tương tác chuột. Ví dụ:

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

css

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

Sử dụng một khung như JQuery để làm những việc như:

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

Vô hiệu hóa và kích hoạt các yếu tố đầu vào trong một khối Div bằng jQuery sẽ giúp bạn!

Kể từ jQuery 1.6, bạn nên sử dụng .prop thay vì .attrvô hiệu hóa.

Tôi chỉ muốn đề cập đến phương pháp mở rộng này để kích hoạt và vô hiệu hóa các yếu tố . Tôi nghĩ rằng đó là một cách sạch sẽ hơn nhiều so với việc thêm và xóa các thuộc tính trực tiếp.

Sau đó, bạn chỉ cần làm:

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

Dưới đây là một nhận xét nhanh cho những người không cần div mà chỉ cần chặn. Trong HTML5 <fieldset disabled="disabled"></fieldset>có thuộc tính bị vô hiệu hóa. Mọi phần tử biểu mẫu trong một bộ trường bị vô hiệu hóa đều bị tắt.

Thuộc tính bị vô hiệu hóa không phải là một phần của thông số W3C cho các phần tử DIV , chỉ dành cho các phần tử biểu mẫu .

Cách tiếp cận jQuery được đề xuất bởi Martin là cách duy nhất để bạn thực hiện điều này.

tương tự như giải pháp của cletu, nhưng tôi đã gặp lỗi khi sử dụng giải pháp đó, đây là cách giải quyết:

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

làm việc tốt với tôi

Bạn có thể sử dụng câu lệnh CSS đơn giản này để vô hiệu hóa các sự kiện

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

Các trình duyệt đã được thử nghiệm: IE 9, Chrome, Firefox và 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);
        }
    }

Các điều khiển đầu vào HTML có thể bị vô hiệu hóa bằng cách sử dụng thuộc tính 'bị vô hiệu hóa' như bạn biết. Khi thuộc tính 'bị vô hiệu hóa' cho điều khiển đầu vào được đặt, các trình xử lý sự kiện được liên kết với điều khiển đó sẽ không được gọi.

Bạn phải mô phỏng hành vi trên cho các thành phần HTML không hỗ trợ thuộc tính 'bị vô hiệu hóa' như div, nếu bạn muốn.

Nếu bạn có div và bạn muốn hỗ trợ nhấp chuột hoặc sự kiện quan trọng trên div đó, thì bạn phải thực hiện hai điều sau: 1) Khi bạn muốn tắt div, hãy đặt thuộc tính bị vô hiệu hóa như bình thường (chỉ để tuân thủ quy ước) 2) Trong trình xử lý nhấp và / hoặc trình xử lý khóa của div, hãy kiểm tra xem thuộc tính bị tắt có được đặt trên div không. Nếu đúng như vậy, thì chỉ cần bỏ qua sự kiện nhấp chuột hoặc sự kiện chính (ví dụ: chỉ cần quay lại ngay lập tức). Nếu thuộc tính bị vô hiệu hóa không được đặt, thì hãy nhấp vào logic và / hoặc logic sự kiện chính của div.

Các bước trên là trình duyệt độc lập là tốt.

Một cách để đạt được điều này là thêm prop chống đỡ cho tất cả trẻ em của div. Bạn có thể đạt được điều này rất dễ dàng:

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

$("#myDiv")tìm thấy div, .find("*")giúp bạn có tất cả các nút con ở tất cả các cấp và.prop('disabled', true) vô hiệu hóa từng .

Bằng cách này, tất cả nội dung bị vô hiệu hóa và bạn không thể nhấp vào chúng, tab vào chúng, cuộn chúng, v.v. Ngoài ra, bạn không cần thêm bất kỳ lớp css nào.

Gói divtrong fieldsetthẻ:

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

Tôi nghĩ rằng tôi sẽ chip trong một vài ghi chú.

1. <div> có thể bị tắt trong IE8 / 9. Tôi cho rằng điều này là "không chính xác", và nó đã ném tôi đi
2. Không sử dụng .removeProp () vì nó có ảnh hưởng vĩnh viễn đến phần tử. Sử dụng .prop ("bị vô hiệu hóa", sai) thay thế
3. $ ("# myDiv"). filter ("input, textarea, select, button"). prop ("bị vô hiệu hóa", true) rõ ràng hơn và sẽ bắt được một số phần tử biểu mẫu bạn sẽ bỏ lỡ với: input

Cái này dành cho người tìm kiếm,

Điều tốt nhất tôi đã làm là,

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

Như đã đề cập trong các bình luận, bạn vẫn có thể truy cập phần tử bằng cách điều hướng giữa các phần tử bằng cách sử dụng phím tab. vì vậy tôi khuyên bạn nên điều này:

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

Nếu bạn muốn giữ ngữ nghĩa của người khuyết tật như sau

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

bạn có thể thêm CSS sau

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

lợi ích ở đây là bạn không làm việc với các lớp trên div mà bạn muốn làm việc cùng

Tôi sẽ sử dụng phiên bản cải tiến của chức năng 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');
      }
    });
};

Nơi lưu trữ thuộc tính 'bị vô hiệu hóa' ban đầu của phần tử.

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

Cách vô hiệu hóa nội dung của DIV

Chỉ riêng thuộc pointer-eventstính CSS không vô hiệu hóa các phần tử con khỏi cuộn và nó không được IE10 hỗ trợ và dưới các phần tử DIV (chỉ dành cho SVG). http://caniuse.com/#feat=pulum-events

Để vô hiệu hóa nội dung của DIV trên tất cả các trình duyệt.

Javascript:

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

Css:

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

Để vô hiệu hóa nội dung của DIV trên tất cả các trình duyệt, ngoại trừ IE10 trở xuống.

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

Dưới đây là một giải pháp toàn diện hơn để che giấu divs cho phép

• không có CSS ​​riêng
• bao gồm toàn bộ trang hoặc chỉ là một yếu tố
• chỉ định màu mặt nạ và độ mờ
• chỉ định Z-index để bạn có thể hiển thị cửa sổ bật lên trên mặt nạ
• hiển thị một con trỏ đồng hồ cát trên mặt nạ
• loại bỏ div mặt nạ trên maks Offer để một cái khác có thể được hiển thị sau
• căng mặt nạ khi thay đổi kích thước phần tử
• Trả về phần tử mặt nạ để bạn có thể tạo kiểu cho nó, v.v.

Cũng bao gồm là đồng hồ cátOn và đồng hồ cát Offer có thể được sử dụng riêng

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

Với điều này bạn có thể làm ví dụ:

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

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

Hoặc chỉ sử dụng css và một lớp "khuyết tật".
Lưu ý: không sử dụng thuộc tính bị vô hiệu hóa.
Không cần phải lộn xộn với bật / tắt jQuery.
Điều này dễ dàng hơn nhiều và hoạt động trên nhiều trình duyệt:

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

Sau đó, bạn có thể tắt và bật nó khi khởi tạo trang của mình hoặc bật nút

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

Một cách khác, trong jQuery, sẽ là lấy chiều cao bên trong, chiều rộng bên trong và vị trí của DIV chứa và chỉ cần phủ lên một DIV khác, trong suốt, trên cùng kích thước. Điều này sẽ hoạt động trên tất cả các yếu tố bên trong container đó, thay vì chỉ các đầu vào.

Tuy nhiên, hãy nhớ rằng với JS bị vô hiệu hóa, bạn vẫn có thể sử dụng các đầu vào / nội dung của DIV. Điều tương tự cũng đi với các câu trả lời trên.

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

Giải pháp css / noscript này thêm lớp phủ phía trên bộ trường (hoặc div hoặc bất kỳ phần tử nào khác), ngăn chặn sự tương tác:

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

Nếu bạn muốn lớp phủ trong suốt vô hình, hãy đặt nền thành ví dụ rgba (128,128,128,0), vì nó sẽ không hoạt động mà không có nền. Các hoạt động trên cho IE9 +. Các css đơn giản hơn nhiều sau đây sẽ hoạt động trên IE11 +

[disabled] { pointer-events: none; }

Trình duyệt Chrome

Nếu bạn chỉ đơn giản là cố gắng ngăn chặn mọi người nhấp và không lo lắng khủng khiếp về bảo mật - tôi đã tìm thấy một div được đặt tuyệt đối với chỉ số z là 99999, điều đó tốt. Bạn không thể nhấp hoặc truy cập bất kỳ nội dung nào vì div được đặt trên nó. Có thể đơn giản hơn một chút và là giải pháp duy nhất cho đến khi bạn cần gỡ bỏ nó.

Có các thư viện javascript có thể định cấu hình lấy chuỗi html hoặc phần tử dom và loại bỏ các thẻ và thuộc tính không mong muốn. Chúng được gọi là chất khử trùng html . Ví dụ:

• DOMPurify
• Điên
• vệ sinh-html

Ví dụ: trong DOMPurify

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

EDIT: Dưới đây tôi đã sử dụng .on()phương pháp, thay vì sử dụng .bind()phương pháp

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

để loại bỏ cài đặt của bạn, bạn có thể sử dụng .unbind()phương pháp. Trong khi đó .off()phương pháp không hoạt động như mong đợi.

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

Sau khi nghiên cứu hàng trăm giải pháp! tìm hiểu về các sự kiện con trỏ, dưới đây là những gì tôi đã làm.

Như @Kokodoko đã đề cập trong giải pháp của mình, nó phù hợp với tất cả các trình duyệt trừ IE. pointer-eventslàm việc trong IE11 và không phải trong các phiên bản thấp hơn. Tôi cũng nhận thấy trong IE11 , các sự kiện con trỏ không hoạt động trên các phần tử con. Và do đó nếu chúng ta có một cái gì đó như dưới đây

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

trong đó span - là phần tử con , thiết lập pointer-events: nonesẽ không hoạt động

Để khắc phục vấn đề này, tôi đã viết một hàm có thể đóng vai trò là các sự kiện con trỏ cho IE và sẽ hoạt động trong các phiên bản thấp hơn.

Trong tệp tin JS

DisablePointerEvents(".DisablePointerEvents");


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

Trong tệp CSS

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

Trong HTML

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

Điều này giả mạo pointer-eventskịch bản pointer-eventskhông hoạt động và khi điều kiện trên của các phần tử con xảy ra.

Fiddle cho cùng

https://jsfiddle.net/rpxxrjxh/

giải pháp simpleset

nhìn vào bộ chọn của tôi

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

những fieldsetUserInfođược div chứa tất cả các đầu vào Tôi muốn tắt hoặc Enable

hy vọng điều này sẽ giúp bạn