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

回答編集履歴

1

ちょうせい

2019/12/05 03:10

投稿

yambejp
yambejp

スコア117875

answer CHANGED
@@ -21,4 +21,26 @@
21
21
  <label><input type="radio" name="female-class" value="A" id="female-classA">A</label>
22
22
  <label><input type="radio" name="female-class" value="B" id="female-classB">B</label>
23
23
  <label><input type="radio" name="female-class" value="C" id="female-classC">C</label>
24
+ ```
25
+
26
+ # 調整
27
+
28
+ > 男女のチェックを入れ替えたら
29
+ もと選んだA~Cのラジオボタンのチェックは外したい
30
+
31
+ 一応以下でできますが、checkedされてもdisabledなら値は送られないので
32
+ ユーザーが任意に入力したものを明確な「削除」や「リセット」以外の
33
+ トリガーで勝手に消すような処理はおすすめしません。
34
+
35
+
36
+ ```javascript
37
+ $(function(){
38
+ $('[name="gender"]').on('change',function() {
39
+ var val=$('[name="gender"]:checked').val();
40
+ $('[name="men-class"]').prop('disabled',val!=="男性");
41
+ $('[name="female-class"]').prop('disabled',val!=="女性");
42
+ if(val=="男性") $('[name="female-class"]').prop('checked',false);
43
+ if(val=="女性") $('[name="men-class"]').prop('checked',false);
44
+ }).trigger('change');
45
+ });
24
46
  ```