ラジオボタンが選択された時だけ、選択できるラジオボタンを作成したいです。

例えば、男性のラジオボタンにチェックが入ったときだけ、男性の下のA~Cが選択でき、
女性の欄のA～Cは選択できないようにしたいと考えています。

【追記】男女のチェックを変えたときには、もと打ったA～Cのチェックは解除して消えるようにしたいです。

html
1        <label><input type="radio" name="gender" value="男性" id="gender-men">男性</label>
2
3        <label><input type="radio" name="men-class" value="A" id="men-classA">A</label>
4        <label><input type="radio" name="men-class" value="B" id="men-classB">B</label>
5        <label><input type="radio" name="men-class" value="C" id="men-classC">C</label>
6
7        <label><input type="radio" name="gender" value="女性" id="gender-female">女性</label>
8
9        <label><input type="radio" name="female-class" value="A" id="female-classA">A</label>
10        <label><input type="radio" name="female-class" value="B" id="female-classB">B</label>
11        <label><input type="radio" name="female-class" value="C" id="female-classC">C</label>
12

jQuery
1$('#gender-men').change(function() {
2    if ( $(this).is(':checked') ){ 
3        $('[name=men-class]').prop('disabled', false);
4    } else { 
5        $('[name=men-class]').prop('disabled', true); 
6    }
7});

行動規範の内容に同意します

回答2件

ラジオボタンのchangeイベントは、チェックが入ったときに発生します。他のラジオボタンにチェックされて、あるボタンのチェックが外れたときには発生しません。

[name=gender]のchangeをまとめて拾って、いまどちらにチェックがついているか確認して処理をすすめる、という形態が必要になりそうです。

投稿2019/12/05 01:08

maisumakun

総合スコア145975

pondering

2019/12/05 02:27

回答いただきありがとうございます。勉強不足でわからないことばかりです、教えていただき本当に感謝です。キーワードをもとに学習を進めたいとおもいます。

行動規範の内容に同意します

ベストアンサー

javascript
1<script>
2$(function(){
3  $('[name="gender"]').on('change',function() {
4    var val=$('[name="gender"]:checked').val();
5    $('[name="men-class"]').prop('disabled',val!=="男性");
6    $('[name="female-class"]').prop('disabled',val!=="女性");
7  }).trigger('change');
8});
9</script>
10
11
12<label><input type="radio" name="gender" value="男性" id="gender-men">男性</label>
13
14<label><input type="radio" name="men-class" value="A" id="men-classA">A</label>
15<label><input type="radio" name="men-class" value="B" id="men-classB">B</label>
16<label><input type="radio" name="men-class" value="C" id="men-classC">C</label>
17
18<label><input type="radio" name="gender" value="女性" id="gender-female">女性</label>
19
20<label><input type="radio" name="female-class" value="A" id="female-classA">A</label>
21<label><input type="radio" name="female-class" value="B" id="female-classB">B</label>
22<label><input type="radio" name="female-class" value="C" id="female-classC">C</label>

調整

男女のチェックを入れ替えたら

もと選んだA～Cのラジオボタンのチェックは外したい

一応以下でできますが、checkedされてもdisabledなら値は送られないので
ユーザーが任意に入力したものを明確な「削除」や「リセット」以外の
トリガーで勝手に消すような処理はおすすめしません。

javascript
1$(function(){
2  $('[name="gender"]').on('change',function() {
3    var val=$('[name="gender"]:checked').val();
4    $('[name="men-class"]').prop('disabled',val!=="男性");
5    $('[name="female-class"]').prop('disabled',val!=="女性");
6    if(val=="男性") $('[name="female-class"]').prop('checked',false);
7    if(val=="女性") $('[name="men-class"]').prop('checked',false);
8  }).trigger('change');
9});