回答編集履歴

1 sample

yambejp

yambejp score 62483

2017/05/29 17:53  投稿

UIとしてはあまり良い処理だとは思えません。
受け取ったサーバー側で処理するのが妥当です。
もしどうしてもサーバー側で処理がわけられないとしても
ラジオボタンから値をhiddenに渡す意味があまりないと思います。
hiddenに予めvalueを設定しておきdisabled属性をつけてラジオボタンに
対応させておき、ラジオボタンの付替えでdisableを調整すればいいのでは?
対応させておき、ラジオボタンの付替えでdisableを調整すればいいのでは?
# sample
javascriptで同じp内にあるproductとpriceのdisabledを変更するサンプルです。
HTMLの構造だけ気をつけて下さい
とりあえずtype="text"にしてありますが、隠すためにhiddenにしてもいいでしょう
※IE対策のためNodeListを配列に入れ替える処理がはいっています
```javascript
<script>
document.addEventListener("change",function(e){
 var t=e.target;
 if(t.name=="q1"){
   n2a(document.querySelectorAll("[name=q1]")).forEach(function(i){
     var flg=t!=i;
     n2a(i.parentNode.querySelectorAll("[name=product],[name=price]")).forEach(function(j){
       j.disabled=flg;
     });
   });
 }
});
function n2a(node){
 if(!NodeList.prototype.forEach){
   node = Array.prototype.slice.call(node,0);
 }
 return node;
}
</script>
<form method="get">
<p class="radiobtn"><input type="radio" id="radio1" name="q1"> <label for="radio1">2017年5月29日(月)</label>
<input type="text" name="product" value="値11" disabled>
<input type="text" name="price" value="値12" disabled>
</p>
<p class="radiobtn"><input type="radio" id="radio2" name="q1"> <label for="radio2">2017年5月30日(火)</label>
<input type="text" name="product" value="値21" disabled>
<input type="text" name="price" value="値22" disabled>
</p>
<p class="radiobtn"><input type="radio" id="radio2" name="q1"> <label for="radio3">2017年5月31日(水)</label>
<input type="text" name="product" value="値31" disabled>
<input type="text" name="price" value="値32" disabled>
</p>
</div>
<input type="submit" value="go">
</form>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る