以下のようなname属性がtopとsubのラジオボタンがあります。

<input type="radio" name="top" value="4">top4
<input type="radio" name="top" value="5">top5
<input type="radio" name="top" value="44">top44
<input type="radio" name="top" value="0">top0

<input type="radio" name="sub" value="100">sub4
<input type="radio" name="sub" value="101">sub5
<input type="radio" name="sub" value="102">sub4plus
<input type="radio" name="sub" value="103">sub5plus

name属性がtopのラジオボタンを選んだら、name属性がsubのラジオボタンにおいて選択の制限をしなければならなくなりました。
条件は、以下のとおりです。
・top4を選ばれたら、sub4とsub4plusが選べる。他は選べない。
・top5を選ばれたら、sub5とsub5plusが選べる。他は選べない。
・top44を選ばれたら、sub4とsub4plusが選べる。他は選べない。
・top0を選ばれたら、sub4とsub5が選べる。他は選べない。

方法としては、name属性がtopとsubのラジオボタンの両方全てにid属性を割り当て、name属性がtopのラジオボタンのidの値により、name属性がsubのラジオボタンを制御する方法を最初に考えました。

f:id:AJYA:20170331233141j:plain
photo credit: Schockwellenreiter Spaß mit P5.js via photopin (license)

ソースコードを短くすることを考える

最初に考えた方法なら確かに制御できますが、ソースコードが長くなります。
そのため、次のようなソースコードを考えました。

<input type="radio" name="top" value="4">top4
<input type="radio" name="top" value="5">top5
<input type="radio" name="top" value="44">top44
<input type="radio" name="top" value="0">top0

<input type="radio" name="sub" class="four no" value="100">sub4
<input type="radio" name="sub" class="five no" value="101">sub5
<input type="radio" name="sub" class="four yes" value="102">sub4plus
<input type="radio" name="sub" class="five yes" value="103">sub5plus

function topselect(){
    var cnt = $("input[name=top]").length;
    
    for (var loop = 0; loop < cnt; loop++){
        if ($('input[name=top]:eq('+loop+')').is(':checked')){
            break;
        }
    }

    switch (loop) {
        case 0:
            $(".four").removeAttr("disabled");
            $(".five").attr("disabled","disabled");
            $(".five").prop('checked', false);
            break;

        case 1:
            $(".five").removeAttr("disabled");
            $(".four").attr("disabled","disabled");
            $(".four").prop('checked', false);
            break;

        case 2:
            $(".four").removeAttr("disabled");
            $(".five").attr("disabled","disabled");
            $(".five").prop('checked', false);
            break;

        case 3:
            $(".no").removeAttr("disabled");
            $(".yes").attr("disabled","disabled");
            $(".yes").prop('checked', false);
            break;
    }
}