回答編集履歴

1

sample

2017/05/29 08:53

投稿

yambejp
yambejp

スコア114583

test CHANGED
@@ -11,3 +11,95 @@
11
11
  hiddenに予めvalueを設定しておきdisabled属性をつけてラジオボタンに
12
12
 
13
13
  対応させておき、ラジオボタンの付替えでdisableを調整すればいいのでは?
14
+
15
+
16
+
17
+ # sample
18
+
19
+ javascriptで同じp内にあるproductとpriceのdisabledを変更するサンプルです。
20
+
21
+ HTMLの構造だけ気をつけて下さい
22
+
23
+ とりあえずtype="text"にしてありますが、隠すためにhiddenにしてもいいでしょう
24
+
25
+ ※IE対策のためNodeListを配列に入れ替える処理がはいっています
26
+
27
+
28
+
29
+ ```javascript
30
+
31
+ <script>
32
+
33
+ document.addEventListener("change",function(e){
34
+
35
+ var t=e.target;
36
+
37
+ if(t.name=="q1"){
38
+
39
+ n2a(document.querySelectorAll("[name=q1]")).forEach(function(i){
40
+
41
+ var flg=t!=i;
42
+
43
+ n2a(i.parentNode.querySelectorAll("[name=product],[name=price]")).forEach(function(j){
44
+
45
+ j.disabled=flg;
46
+
47
+ });
48
+
49
+ });
50
+
51
+ }
52
+
53
+ });
54
+
55
+ function n2a(node){
56
+
57
+ if(!NodeList.prototype.forEach){
58
+
59
+ node = Array.prototype.slice.call(node,0);
60
+
61
+ }
62
+
63
+ return node;
64
+
65
+ }
66
+
67
+ </script>
68
+
69
+ <form method="get">
70
+
71
+ <p class="radiobtn"><input type="radio" id="radio1" name="q1"> <label for="radio1">2017年5月29日(月)</label>
72
+
73
+ <input type="text" name="product" value="値11" disabled>
74
+
75
+ <input type="text" name="price" value="値12" disabled>
76
+
77
+ </p>
78
+
79
+ <p class="radiobtn"><input type="radio" id="radio2" name="q1"> <label for="radio2">2017年5月30日(火)</label>
80
+
81
+ <input type="text" name="product" value="値21" disabled>
82
+
83
+ <input type="text" name="price" value="値22" disabled>
84
+
85
+ </p>
86
+
87
+ <p class="radiobtn"><input type="radio" id="radio2" name="q1"> <label for="radio3">2017年5月31日(水)</label>
88
+
89
+ <input type="text" name="product" value="値31" disabled>
90
+
91
+ <input type="text" name="price" value="値32" disabled>
92
+
93
+ </p>
94
+
95
+ </div>
96
+
97
+ <input type="submit" value="go">
98
+
99
+ </form>
100
+
101
+
102
+
103
+
104
+
105
+ ```