ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript:ラジオボタンの選択に従って、他のラジオボタンを制御するときの考え方

スポンサーリンク

以下のような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;
    }
}

name属性がsubのラジオボタンにclass属性を割り当てます。

ラジオボタンがクリックされたら呼び出すtopselect()関数で、押されたラジオボタンが何番目か取得します。
取得した番号に従い、class属性に対して、ラジオボタンの有効/無効の操作をしています。


ソースコードは確かに短くなりましたが、わかりやすいのかという疑問は残ります。