【コピペでOK】その他にチェックを入れたらテキスト入力を有効化、必須にする

投稿日：2020/2/11　最終更新日:2020/05/12　閲覧数：4575

カテゴリー：システム・WEB>

こんにちは。
今回は「その他にチェックを入れたらテキスト入力を必須にする」です。

設問がたくさんあるとき＝その他の処理が複数あるとき

でも、jsの編集をしなくても良いように作っています。
そのときはname値をいい感じに調整して使用してください。

cssはご自身でいい感じにしてください。

html

【コピペでOK】チェックボックスをグループで入力必須にする

タグ：#html#jquery#js#コピペ#チェックボックス#フォーム

HTML部分はこちらの記事と同じです。
なのでjs部分を追記すれば一緒に動くようになっています。


<p>
    <!--グループ用チェックボックス-->
    <input type="checkbox" id="group_control" required><br>
    <label>1つ以上チェックをしてください</label>
</p>
<div>
    <p><input class="check" type="checkbox" name="group" id="group-01" value="犬"><label for="group-01">犬</label></p>
    <p><input class="check" type="checkbox" name="group" id="group-02" value="猫"><label for="group-02">猫</label></p>
    <p>
        <input class="check other" type="checkbox" name="group" id="group-03" value="その他"><label for="group-03">その他</label>
        <input type="text" name="group.other" required disabled></p>
</div>

次にjsです。

js

class=”other”のチェックボックスが切り替わることで発火
↓
クリックした要素のname属性を取得
↓
操作する先のIDを生成
↓
対応するIDのinputを有効化する

といったものです。

なお、inputを必須にする「required」属性ですが、要素自体が無効化すると必須ではなくなるので、「required 」に関してはjsで操作する必要はありません。


<!-- jQueryの読み込み -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
    //====================
    //その他の入力を切り替え
    //====================
    $(function() {
        //チェックしたら発火
        $('.other').change(function() {

            //選択したinputのname値を変数に格納
            var ctl_oth_name = $(this).attr('name');

            //control用のIDを連結
            var other_name = ctl_oth_name + '.other_option_response';

            //その他にチェック
            if ( this.checked ) {
                //その他の内容を有効化
                $("input[name='" + other_name + "']").prop('disabled', false);
            } else {
                //その他の内容を無効化
                $("input[name='" + other_name + "']").prop('disabled', true);
            }
        });
    });
</script>

こちらも併せて参考にしてください。