모든 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');
    }   
}

jQuery 를 사용하여 Div 블록에서 입력 요소 비활성화 및 활성화 가 도움이 될 것입니다!

jQuery 1.6부터는 비활성화 .prop대신 사용해야 합니다 .attr.

난 그냥 요소를 활성화 및 비활성화하는이 확장 방법 을 언급 하고 싶었다 . 속성을 직접 추가하고 제거하는 것보다 훨씬 깨끗한 방법이라고 생각합니다.

그런 다음 간단하게 수행하십시오.

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

다음은 div가 필요하지 않고 블록 요소 만 필요한 사람들을위한 빠른 의견입니다. HTML5 <fieldset disabled="disabled"></fieldset>에서는 disabled 속성이 있습니다. 비활성화 된 필드 세트의 모든 양식 요소는 비활성화되어 있습니다.

disabled 속성은 DIV 요소 에 대한 W3C 사양의 일부가 아니며 양식 요소 에만 해당됩니다 .

Martin이 제안한 jQuery 접근 방식은이를 달성 할 수있는 유일한 방법입니다.

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

아시다시피 'disabled'속성을 사용하여 HTML 입력 컨트롤을 비활성화 할 수 있습니다. 입력 제어에 대해 'disabled'속성이 설정되면 해당 제어와 연관된 이벤트 핸들러가 호출되지 않습니다.

원하는 경우 div와 같은 'disabled'속성을 지원하지 않는 HTML 요소에 대해 위의 동작을 시뮬레이션해야합니다.

div가 있고 해당 div에서 클릭 또는 키 이벤트를 지원하려면 두 가지 작업을 수행해야합니다. 1) div를 비활성화하려면 disabled 속성을 평소와 같이 설정하십시오 ( 규칙) 2) div의 클릭 및 / 또는 키 처리기에서 div에 disabled 속성이 설정되어 있는지 확인하십시오. 그렇다면 클릭 또는 키 이벤트를 무시하십시오 (예 : 즉시 반환). disabled 속성이 설정되어 있지 않으면 div의 클릭 및 / 또는 키 이벤트 로직을 수행하십시오.

위의 단계는 브라우저와 무관합니다.

이를 달성하는 한 가지 방법은 비활성화 된 소품을 div의 모든 자식에 추가하는 것입니다. 이를 매우 쉽게 달성 할 수 있습니다.

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

$("#myDiv")div를 찾고 .find("*")모든 레벨의 모든 하위 노드를 가져오고 .prop('disabled', true)각 노드를 비활성화합니다.

이 방법으로 모든 컨텐츠가 비활성화되며 컨텐츠를 클릭하거나 탭하거나 스크롤 할 수 없습니다. 또한 CSS 클래스를 추가 할 필요가 없습니다.

랩 div내 fieldset태그 :

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

나는 몇 노트에 칩을 줄 것이라고 생각했다.

1. IE8 / 9에서는 <div>를 비활성화 할 수 있습니다. 나는 이것이 "정확하지 않다"고 가정하고 나를 버렸다.
2. .removeProp ()는 요소에 영구적 인 영향을 미치므로 사용하지 마십시오. 대신 .prop ( "disabled", false)를 사용하십시오.
3. $ ( "# myDiv"). filter ( "input, textarea, select, button"). prop ( "disabled", true)는보다 명시 적이며 : input으로 놓칠 수있는 일부 양식 요소를 포착합니다.

이것은 검색자를위한 것입니다.

내가 한 최선은

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

요소의 원래 'disabled'속성을 저장합니다.

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

DIV의 내용을 비활성화하는 방법

CSS pointer-events속성만으로는 자식 요소가 스크롤되는 것을 비활성화하지 않으며 IE10에서는 지원되지 않으며 DIV 요소에서는 지원되지 않습니다 (SVG 만 해당). http://caniuse.com/#feat=pointer-events

모든 브라우저에서 DIV의 내용을 비활성화합니다.

자바 스크립트 :

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

CSS :

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

IE10 이하를 제외한 모든 브라우저에서 DIV의 내용을 비활성화합니다.

자바 스크립트 :

$("#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- 색인을 지정하십시오.
• 마스크 위에 모래 시계 커서 표시
• maksOff에서 마스킹 div를 제거하여 나중에 다른 div를 표시 할 수 있습니다.
• 요소 크기 조정시 마스크 늘이기
• 마스크 요소를 반환하여 스타일을 지정할 수 있습니다.

또한 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와 "비활성화 된"클래스를 사용하십시오.
참고 : disabled 속성을 사용하지 마십시오.
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 전용 / 노 스크립트 솔루션은 상호 작용을 방지하여 필드 세트 (또는 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; }

크롬

단순히 사람들이 클릭하는 것을 막으려 고하고 보안에 대해 걱정하지 않는다면-99999의 z- 인덱스가있는 절대 배치 div가 잘 정렬 된 것을 발견했습니다. div가 위에 있으므로 내용을 클릭하거나 액세스 할 수 없습니다. 조금 더 간단 할 수 있으며 CSS를 제거해야 할 때까지 CSS 전용 솔루션입니다.

html 문자열 또는 dom 요소를 가져오고 원하지 않는 태그와 속성을 제거하는 구성 가능한 Javascript 라이브러리가 있습니다. 이것을 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가 자신의 솔루션에 언급 된 IE를 제외한 모든 브라우저 경향이있다. IE11pointer-events 에서는 작동 하지만 하위 버전에서는 작동 하지 않습니다. 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 피들

https://jsfiddle.net/rpxxrjxh/

간단한 솔루션

내 선택기를 봐

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

그만큼 fieldsetUserInfo DIV 내가 사용하지 않거나 사용하려는 모든 입력을 포함합니다

이것이 당신을 도울 수 있기를 바랍니다