teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

sample

2017/05/29 08:53

投稿

yambejp
yambejp

スコア117871

answer CHANGED
@@ -4,4 +4,50 @@
4
4
  ラジオボタンから値をhiddenに渡す意味があまりないと思います。
5
5
 
6
6
  hiddenに予めvalueを設定しておきdisabled属性をつけてラジオボタンに
7
- 対応させておき、ラジオボタンの付替えでdisableを調整すればいいのでは?
7
+ 対応させておき、ラジオボタンの付替えでdisableを調整すればいいのでは?
8
+
9
+ # sample
10
+ javascriptで同じp内にあるproductとpriceのdisabledを変更するサンプルです。
11
+ HTMLの構造だけ気をつけて下さい
12
+ とりあえずtype="text"にしてありますが、隠すためにhiddenにしてもいいでしょう
13
+ ※IE対策のためNodeListを配列に入れ替える処理がはいっています
14
+
15
+ ```javascript
16
+ <script>
17
+ document.addEventListener("change",function(e){
18
+ var t=e.target;
19
+ if(t.name=="q1"){
20
+ n2a(document.querySelectorAll("[name=q1]")).forEach(function(i){
21
+ var flg=t!=i;
22
+ n2a(i.parentNode.querySelectorAll("[name=product],[name=price]")).forEach(function(j){
23
+ j.disabled=flg;
24
+ });
25
+ });
26
+ }
27
+ });
28
+ function n2a(node){
29
+ if(!NodeList.prototype.forEach){
30
+ node = Array.prototype.slice.call(node,0);
31
+ }
32
+ return node;
33
+ }
34
+ </script>
35
+ <form method="get">
36
+ <p class="radiobtn"><input type="radio" id="radio1" name="q1"> <label for="radio1">2017年5月29日(月)</label>
37
+ <input type="text" name="product" value="値11" disabled>
38
+ <input type="text" name="price" value="値12" disabled>
39
+ </p>
40
+ <p class="radiobtn"><input type="radio" id="radio2" name="q1"> <label for="radio2">2017年5月30日(火)</label>
41
+ <input type="text" name="product" value="値21" disabled>
42
+ <input type="text" name="price" value="値22" disabled>
43
+ </p>
44
+ <p class="radiobtn"><input type="radio" id="radio2" name="q1"> <label for="radio3">2017年5月31日(水)</label>
45
+ <input type="text" name="product" value="値31" disabled>
46
+ <input type="text" name="price" value="値32" disabled>
47
+ </p>
48
+ </div>
49
+ <input type="submit" value="go">
50
+ </form>
51
+
52
+
53
+ ```