web-dev-qa-db-ja.com

JavascriptでDivとその要素を有効および無効にする

私はEnableとDisableのメソッドを探していますdiv id = "dcalc"とその子。

<div id="dcalc" class="nerkheArz"
 style="left: 50px; top: 150px; width: 380px; height: 370px;
 background: #CDF; text-align: center" >
 <div class="nerkh-Arz"></div>
 <div id="calc"> </div>
</div>

ページの読み込み時にそれらを無効にし、クリックするだけで有効にできますか？

これは私が試したことです

document.getElementById("dcalc").disabled = true;
javascriptjqueryxhtml
58
Emax

以下に示すように、jQueryの attr() または prop() 関数を使用してこれらを設定できるはずです。

jQuery（<1.7）：

// This will disable just the div
$("#dcacl").attr('disabled','disabled');

または

// This will disable everything contained in the div
$("#dcacl").children().attr("disabled","disabled");

jQuery（> = 1.7）：

// This will disable just the div
$("#dcacl").prop('disabled',true);

または

// This will disable everything contained in the div
$("#dcacl").children().prop('disabled',true);

または

//  disable ALL descendants of the DIV
$("#dcacl *").prop('disabled',true);

Javascript：

// This will disable just the div
document.getElementById("dcalc").disabled = true;

または

// This will disable all the children of the div
var nodes = document.getElementById("dcalc").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
     nodes[i].disabled = true;
}
139
Rion Williams

すべてのdivのコントロールを無効にする場合は、divに透明なdivを追加して無効にし、クリックできないようにし、fadeToを使用して無効な外観を作成します。

これを試して。

$('#DisableDiv').fadeTo('slow',.6);
$('#DisableDiv').append('<div style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');
50
Sergio Ramirez

以下は、すべての子孫要素を選択して無効にします。

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

ただし、入力、ボタンなどの特定の要素タイプを無効にすることは本当に意味があるので、より具体的なセレクタが必要です。

$("#dcac1").find(":input").prop("disabled",true);
// noting that ":input" gives you the equivalent of
$("#dcac1").find("input,select,textarea,button").prop("disabled",true);

再度有効にするには、「無効」をfalseに設定します。

ページの読み込み時にそれらを無効にし、クリックすることでそれらを有効にすることができます

OK、上記のコードをドキュメントレディハンドラーに入れ、適切なクリックハンドラーをセットアップします。

$(document).ready(function() {
    var $dcac1kids = $("#dcac1").find(":input");
    $dcac1kids.prop("disabled",true);

    // not sure what you want to click on to re-enable
    $("selector for whatever you want to click").one("click",function() {
       $dcac1kids.prop("disabled",false);
    }
}

ページの読み込みとクリックの間にdivに要素を追加しないことを前提に、セレクターの結果をキャッシュしました。また、クリックハンドラーを .one() でアタッチしました。要素を再度無効にする要件を指定していないため、おそらくイベントを1回だけ処理する必要があるためです。もちろん、必要に応じて.one()を.click()に変更できます。

19
nnnnnn