모든 div 컨텐츠를 비활성화하는 방법

lottoking 2020. 4. 2. 08:24

모든 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>

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

IE8 / 9에서 <div>를 비활성화 할 수 있습니다. 나는 이것이 "정확하지 않다"고 가정하고 나를 버렸다.
.removeProp ()는 요소에 영구적 인 영향을 미치므로 사용하지 마십시오. 대신 .prop ( "disabled", false)를 사용하십시오.
$ ( "# 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 전용 솔루션입니다.

편집 : 아래에서 .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>

여기서 범위는 자식 요소를 -is 설정, 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);

는 fieldsetUserInfoDIV 내가 사용하지 않거나 사용하려는 모든 입력을 포함합니다

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

참고 URL : https://stackoverflow.com/questions/639815/how-to-disable-all-div-content

'IT' 카테고리의 다른 글

Xcode : 프로세스 작업을 가져 오지 못했습니다. (0)	2020.04.02
MemoryStream을 파일에 저장 및로드 (0)	2020.04.02
동일한 방식으로 두 ArrayList를 무작위로 추출하는 방법은 무엇입니까? (0)	2020.04.02
jQuery 세트 선택 색인 (0)	2020.04.02
핸들 막대의 인덱스를 사용하여 액세스 배열 항목에 어떻게 액세스합니까? (0)	2020.04.02

현재글모든 div 컨텐츠를 비활성화하는 방법

내가 바로 로또왕!

javascript, C#, spring3, 영화순위, 놀거리, 축제, 볼거리, spring, c++, DVD순위, 무비순위, 공연, 연극, Java, 자바, 관광, 여행, jquery, 뮤지컬, 행사,

Today :
Yesterday :

lottoking