JavaScript/jQueryを使用してdivのコンテンツを無効にする
この投稿では、JavaScriptとjQueryでdivのコンテンツを無効にする方法について説明します。
1.jQueryの使用
アイデアは、jQueryとCSSを使用してdiv内のクリックイベントを無効にすることです。これは、設定することによって行うことができます pointer-events jQueryの助けを借りたCSSプロパティ .addClass() 関数。
JS
|
1 2 3 |
$(document).ready(function() { $("#container").addClass("disable-div"); }); |
CSS
|
1 2 3 |
.disable-div { pointer-events: none; } |
HTML
|
1 2 3 4 |
<div id="container"> <label>Enter your name: <input type="text"></label> <button id="submit">Submit</button> </div> |
または、 .children() DOMツリーのdiv要素のすべての子を取得し、HTMLブール値を設定するメソッド disabled でtrueに属性 .prop() 方法。
JS
|
1 2 3 |
$(document).ready(function() { $("#container").children().prop('disabled', true); }); |
HTML
|
1 2 3 4 5 |
<div id="container"> <label>Enter your name:</label> <input type="text"> <button id="submit">Submit</button> </div> |
また、使用することができます :input input、textarea、select、button要素などのすべてのフォームコントロールを選択する親セレクターを持つセレクター。
JS
|
1 2 3 |
$(document).ready(function() { $("#container :input").prop('disabled', true); }); |
HTML
|
1 2 3 4 |
<div id="container"> <label>Enter your name: <input type="text"></label> <button id="submit">Submit</button> </div> |
すべての要素を選択するには、特別な文字列を使用します *.
JS
|
1 2 3 |
$(document).ready(function() { $('#container *').prop('disabled', true); }); |
HTML
|
1 2 3 4 5 |
<div id="container"> <label>Enter your name:</label> <input type="text"> <button id="submit">Submit</button> </div> |
2.JavaScriptを使用する
プレーンJavaScriptでは、divのすべての子を取得し、ループ内でそれらを無効にすることができます。アイデアは、 getElementsByTagName() メソッド。指定されたタグ名を持つ要素のコレクションを返します。すべての要素を取得するには、 * ストリング。
JS
|
1 2 3 4 |
var childNodes = document.getElementById("container").getElementsByTagName('*'); for (var node of childNodes) { node.disabled = true; } |
HTML
|
1 2 3 4 |
<div id="container"> <label>Enter your name: <input type="text"></label> <button id="submit">Submit</button> </div> |
これで、JavaScriptとjQueryでdivのコンテンツを無効にすることができます。
こちらも参照: