そして伝説になりたかった

働きたくない男の雑記・備忘録

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

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

カテゴリー: 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>

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

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

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

よく見られている記事

おすすめの記事

管理人について

高専へ入学するがプログラミングが嫌いという理由で機械科を選択。その後勉強が嫌いという理由で高専退学。グラフィックデザインの仕事ができると騙され20歳からweb業界へ就職するも、大嫌いなプログラミングをさせられ続ける毎日が待っていた。未だにプログラミング地獄から脱出できないでいる。

その他管理人についてはこちら
プロフィールとか


コメントを残す