ラジオボタンが選択されたときだけ選択できるラジオボタン

Question

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

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

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

        <label><input type="radio" name="gender" value="男性" id="gender-men">男性</label>

        <label><input type="radio" name="men-class" value="A" id="men-classA">A</label>
        <label><input type="radio" name="men-class" value="B" id="men-classB">B</label>
        <label><input type="radio" name="men-class" value="C" id="men-classC">C</label>

        <label><input type="radio" name="gender" value="女性" id="gender-female">女性</label>

        <label><input type="radio" name="female-class" value="A" id="female-classA">A</label>
        <label><input type="radio" name="female-class" value="B" id="female-classB">B</label>
        <label><input type="radio" name="female-class" value="C" id="female-classC">C</label>

$('#gender-men').change(function() {
    if ( $(this).is(':checked') ){ 
        $('[name=men-class]').prop('disabled', false);
    } else { 
        $('[name=men-class]').prop('disabled', true); 
    }
});

Answer 1

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

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

Comments

[pondering]

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

Answer 2

<script>
$(function(){
  $('[name="gender"]').on('change',function() {
    var val=$('[name="gender"]:checked').val();
    $('[name="men-class"]').prop('disabled',val!=="男性");
    $('[name="female-class"]').prop('disabled',val!=="女性");
  }).trigger('change');
});
</script>


<label><input type="radio" name="gender" value="男性" id="gender-men">男性</label>

<label><input type="radio" name="men-class" value="A" id="men-classA">A</label>
<label><input type="radio" name="men-class" value="B" id="men-classB">B</label>
<label><input type="radio" name="men-class" value="C" id="men-classC">C</label>

<label><input type="radio" name="gender" value="女性" id="gender-female">女性</label>

<label><input type="radio" name="female-class" value="A" id="female-classA">A</label>
<label><input type="radio" name="female-class" value="B" id="female-classB">B</label>
<label><input type="radio" name="female-class" value="C" id="female-classC">C</label>

調整

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

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

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

$(function(){
  $('[name="gender"]').on('change',function() {
    var val=$('[name="gender"]:checked').val();
    $('[name="men-class"]').prop('disabled',val!=="男性");
    $('[name="female-class"]').prop('disabled',val!=="女性");
    if(val=="男性") $('[name="female-class"]').prop('checked',false);
    if(val=="女性") $('[name="men-class"]').prop('checked',false);
  }).trigger('change');
});

Comments

[pondering]

回答をいただき、ありがとうございます。
投稿時に考えが不足しており、
男女のチェックを入れ替えたら
もと選んだA～Cのラジオボタンのチェックは外したいのですが、教えていただけませんでしょうか。

[pondering]

ありがとうございます。
正直、見た目の問題で外したいと思っていたのですが
勝手に外す処理については、おっしゃる通りですね。
この部分については、検討してみます。

今回教えていただいた内容を、自分で一からできるように練習してみます。
ありがとうございました。