3x3のラジオボタンを各行・各列から一つずつ選択するようにしたい。

Question

前提・実現したいこと

HTMLとデータベースを学習中の初心者です。現在HTMLとbootstrap4.5を使用して作成したフォームからデータを取得し、データベースに記録しようとしています。

そこで、以下のようなフォームを用意して、テキストボックスに食べたものを入力し、ラジオボタンで何日目かを指定するようにしました。現在のコードでは同じ日に複数種類の食べ物を指定することは防げていますが、同じ種類の食べ物を複数日指定できてしまいます。各食べ物について同じ日を指定できないようにしたいです。

ラジオボタンを各行・各列から一つずつのみ選択できるようにするにはどのような方法がいいでしょうか。

1日目〇 2日目〇 3日目〇　食べ物：テキストボックス
1日目〇 2日目〇 3日目〇　食べ物：テキストボックス
1日目〇 2日目〇 3日目〇　食べ物：テキストボックス

該当のソースコード

    <form>
        <div class="form-group">
            <label class="control-label">食事</label>
                <div class="form-check form-check-inline">
                    1日目
                    <input class="form-check-input" type="radio" name="first">
                </div>
                <div class="form-check form-check-inline">
                    2日目
                    <input class="form-check-input" type="radio" name="second">
                </div>
                <div class="form-check form-check-inline">
                    3日目
                    <input class="form-check-input" type="radio" name="third">
                </div>
                <label>食べ物：</label>
                <input type="text" name="food">

                <div class="form-check form-check-inline">
                    1日目
                    <input class="form-check-input" type="radio" name="first">
                </div>
                <div class="form-check form-check-inline">
                    2日目
                    <input class="form-check-input" type="radio" name="second">
                </div>
                <div class="form-check form-check-inline">
                    3日目
                    <input class="form-check-input" type="radio" name="third">
                </div>
                <label>食べ物：</label>
                <input type="text" name="food">

                <div class="form-check form-check-inline">
                    1日目
                    <input class="form-check-input" type="radio" name="first">
                </div>
                <div class="form-check form-check-inline">
                    2日目
                    <input class="form-check-input" type="radio" name="second">
                </div>
                <div class="form-check form-check-inline">
                    3日目
                    <input class="form-check-input" type="radio" name="third">
                </div>
                <label>食べ物：</label>
                <input type="text" name="food">

        </div>
    </form>

補足情報（FW/ツールのバージョンなど）

MacOS Catalina 10.15.7
Google Chrome 87.0.4280.141

Comments

[hoshi-takanori]

毎日同じものを食べちゃいけないんですか？ ってのはさておき、このような制約はラジオボタンでは無理でしょうね。あと、UI 的には現状の「○○を食べたのは何日目か」という入力方法より、「1 日目に何を食べたか、2 日目は…」の方が自然な気がします。

[poiqwe]

確かに「○日目」に対してテキストボックスで入力する方がわかりやすい気がしました。今回はラジオボタンを１行に表示できるinlineを使ってみたかったのでこのような形式にしました。形式はこのままでjavascriptを使用することにします。ありがとうございました。

Answer 1

このような処理はjavascriptで実装した方がシンプルにできそうです。
webサイト制作を学習しているなら勉強してみてはいかがでしょうか？

勉強用のお題でないなら、このような入力欄にラジオボタンは使わない方が入力しやすいと思うので、素直に1日ごとに入力欄を分ける方が入力しやすそうです。

Comments

[poiqwe]

ラジオボタンを使って作りたかったのでjavascriptを使って実装することにします。
ありがとうございました。