Jquery + modal の質問です。

Question

前提・実現したいこと

JQueryで異なるinput type=text に表示させたい。再現できる範囲でコードを提示します。
今現在は2つそれぞれのmodalでチェックボックスを別々にするとinput id="input_method"　と　input id="input_consultation"　に同時に表示されてしまいます。
これをそれぞれ指定のidに表示したいです。
ご回答お願いいたします。

<**.blade.php>

<div class="input-group input-group-lg mb-3 mt-3"> <span class="input-group-text w-32 fw-bold" id="inputGroup-sizing-default" style="background-color: #ecee6c">アルファベット</span> <div class="trigger_method w-4/5"> <input id="input_method" type="text" class="form-control form-control-lg" name="method_set" value="{{ old('method_set') }}" placeholder="ここをクリックしてください(エラー表示の際は、再度ご入力ください)" disabled style="background-color: #f2f3b2" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"> </div> <!-- Modal --> <div class="modal fade" id="modal_method" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content" style="margin-top:150px"> <div class="modal-header"> alphabetを選択してください </div> <div class="modal-body"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="AAA"> <label class="form-check-label" for="inlineCheckbox1">AAA</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="BBB"> <label class="form-check-label" for="inlineCheckbox2">BBB</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="CCC"> <label class="form-check-label" for="inlineCheckbox3">CCC</label> </div> </div> <div class="modal-footer"> <button type="button" id="methodClose" class="btn btn-primary" data-bs-dismiss="modal">保存して閉じる</button> </div> </div> </div> </div> </div> <div class="input-group input-group-lg mb-3 mt-3"> <span class="input-group-text w-32 fw-bold" id="inputGroup-sizing-default" style="background-color: #ecee6c">ひらがな</span> <div class="trigger_consultation w-4/5"> <input id="input_consultation" type="text" class="form-control form-control-lg" name="consultation_set" value="{{ old('consultation_set') }}" placeholder="ここをクリックしてください(エラー表示の際は、再度ご入力ください)" disabled style="background-color: #f2f3b2" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" > </div> <!-- Modal --> <div class="modal fade" id="modal_consultation" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content" style="margin-top:150px"> <div class="modal-header"> ひらがなを選択してください </div> <div class="modal-body"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="あああ"> <label class="form-check-label" for="inlineCheckbox1">あああ</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="いいい"> <label class="form-check-label" for="inlineCheckbox2">いいい</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="ううう"> <label class="form-check-label" for="inlineCheckbox3">ううう</label> </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" id="methodClose" class="btn btn-primary" data-bs-dismiss="modal">保存して閉じる</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    {{-- アルファベット選択 --}}
    <script>
        $(function() {
            // クリックでモーダルオープン
            $('.trigger_method').on('click', function() {
                $('#modal_method').modal('show');
            });
            array = [];
            change_input_value(array);
            // チェックボックスをチェックしたら発動
            $('input[type="checkbox"]').click(function() {
                // チェックされているか配列で管理
                $number = $(this).val();
                array[$number] = 1;
                // チェックが外されたら配列のその値を削除
                if ($(this)[0].checked == false) {
                    delete array[$number];
                }
                // 配列のkeyを渡す
                change_input_value(Object.keys(array));
            });
            // input_methodタグのvalueを変更
            function change_input_value(array) {
                input_values = $('#input_method');
                input_values.val(array);
            }
        });
    </script>

    {{-- ひらがな選択 --}}
    <script>
        $(function() {
            // クリックでモーダルオープン
            $('.trigger_consultation').on('click', function() {
                $('#modal_consultation').modal('show');
            });
            array = [];
            change_input_value(array);
            // チェックボックスをチェックしたら発動
            $('input[type="checkbox"]').click(function() {
                // チェックされているか配列で管理
                $number = $(this).val();
                array[$number] = 1;
                // チェックが外されたら配列のその値を削除
                if ($(this)[0].checked == false) {
                    delete array[$number];
                }
                // 配列のkeyを渡す
                change_input_value(Object.keys(array));
            });
            // input_consultationタグのvalueを変更
            function change_input_value(array) {
                input_values = $('#input_consultation');
                input_values.val(array);
            }
        });
    </script>

Comments

[m.ts10806]

>mordal　
「モーダル」のことなら「modal」です。

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

>モーダルの中身は関係ないと思いますので
その根拠は？
ひとまずコピペで他者が再現できるように配慮はしてください。
コードも一部だけでは何とも言えません。

[Ikkyuu]

業務で使うので全部は公開できませんが、再現可能なレベルで書き直します。

[m.ts10806]

質問は編集できますので、適宜調整願います。

[Ikkyuu]

ありがとうございます。編集してみました。

Answer 1

自己解決できました。
ヒントはJQuery側のinput指定を要素から属性に変えるです。
色々試して、10時間もかかっちまったZe!!
参照してくれた方々、ありがとうございました。