すべての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要素を必要とせず、blockelementのみを必要とするユーザー向けの簡単なコメントを示します。HTML5では<fieldset disabled="disabled"></fieldset>、disabled属性を取得しました。無効なフィールドセットのすべてのフォーム要素は無効です。

disabled属性は、フォーム要素の場合のみ、DIV要素の W3C仕様の一部ではありません。

Martinが提案したjQueryアプローチは、これを実現するための唯一の確実な方法です。

クレトゥの解決策に似ていますが、その解決策を使用してエラーが発生しました、これは回避策です：

$('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入力コントロールは 'disabled'属性を使用して無効にできます。入力コントロールの 'disabled'属性が設定されると、そのようなコントロールに関連付けられたイベントハンドラーは呼び出されません。

必要に応じて、divのような「無効」属性をサポートしないHTML要素に対して上記の動作をシミュレートする必要があります。

divがあり、そのdivでのクリックまたはキーイベントをサポートする場合は、次の2つのことを行う必要があります。1）divを無効にする場合は、通常どおり、disabled属性を設定します（規則）2）divのクリックハンドラーやキーハンドラーで、divにdisabled属性が設定されているかどうかを確認します。そうであれば、クリックまたはキーイベントを無視してください（たとえば、すぐに戻るだけ）。disabled属性が設定されていない場合は、divのクリックやキーイベントロジックを実行します。

上記の手順もブラウザに依存しません。

これを実現する1つの方法は、無効化されたプロップを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"）。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');
      }
    });
};

要素の元の「無効」なプロパティを格納します。

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

DIVのコンテンツを無効にする方法

CSS pointer-eventsプロパティのみでは、子要素のスクロールが無効になりません。また、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;
}

IE10以下を除くすべてのブラウザーでDIVのコンテンツを無効にします。

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-indexを指定します
• マスクの上に砂時計カーソルを表示する
• 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でのもう1つの方法は、含まれるDIVの内部の高さ、内部の幅、および位置を取得し、同じサイズの上に別のDIVを透明にオーバーレイするだけです。これは、入力だけでなく、そのコンテナ内のすべての要素で機能します。

ただし、JSを無効にしても、DIVの入力/コンテンツを引き続き使用できます。同じことが上記の回答にも当てはまります。

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

このcssのみ/ noscriptソリューションは、フィールドセット（または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のみのソリューションです。

html文字列またはdom要素を受け取り、不要なタグと属性を取り除く構成可能なjavascriptライブラリがあります。これらはhtml消毒剤として知られています。例えば：

• 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以外のすべてのブラウザ用がちです。以前のバージョンではなく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フィドル

https://jsfiddle.net/rpxxrjxh/

シンプルセットソリューション

私のセレクターを見て

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

fieldsetUserInfodivが、私は無効または有効にしたいすべての入力が含まれています

これがあなたを助けることを願っています