入力コントロールの一括ディスエーブルJavascript版

何らかの処理中に入力を抑制したい場合のロジック。
Javascript版です。
以下のようなかんじ。

[disable押下時]
id=”client”配下の入力コントロールを一括でdisableにします。

[undo押下時]
id=”client”配下の入力コントロールを一括でdisable解除します。

ソースは以下。

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title>disable test</title>
6    <script type="text/javascript">
7    function disable_children_controls(win, b) {
8      for(var w of win.children) {
9        if(w.disabled != undefined)
10          w.disabled = b;
11        disable_children_controls(w, b);
12      }
13    }
14    </script>
15  </head>
16  <body>
17    <div id="client">
18      <div><label>Enter something</label><input type="text"><input type="button" value="go !" onclick="alert('hello !')"></div>
19      <div><input type="checkbox">A<input type="checkbox">B<input type="checkbox">C <input type="radio" checked>X<input type="radio">Y<input type="radio">Z</div>
20      <div><input type="button" value="disable" onclick="disable_children_controls(document.getElementById('client'), true)"></div>
21    </div>
22    <div id="command">
23      <div align="left"><input type="button" value="undo" onclick="disable_children_controls(document.getElementById('client'), false)"></div>
24    </div>
25  </body>
26</html>

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル