Bootstrapでモーダルダイアログ表示(規約既読用チェックボックス）

はじめに
サンプルコード(Laravel 含む)
1. 関連

はじめに

よく、規約を読まないとボタンが押せないようにするサイトがよくあります。その実装方法をbootstrapモーダルダイアログ表示とチェックボックスによりボタン活性化の方法を示します

サンプルコード(Laravel 含む)

@extends('layouts.app1')

@section('title')
　ご利用申し込み
@endsection

@section('content')

    <h1> ご利用申し込み</h1>

    <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-offset-3 col-lg-6  ">
                {!! Form::open(['route'=>'memberCreate']) !!}
                    <BR />
                    <div class="form-group @if(!empty($errors->first('name'))) has-error @endif">
                        {!! Form::label('name','おなまえ（ひらがな入力）') !!}
                        <input type="text" name="name" value="{{old('name')}}" class="form-control">
                        <span class="help-block">{{$errors->first('name')}}</span>

                    </div>

                    <div class="form-group @if(!empty($errors->first('email'))) has-error @endif">
                        {!! Form::label('email','Emailアドレス') !!}
                        <input type="text" name="email" value="{{old('email')}}" class="form-control">
                        <span class="help-block">{{$errors->first('email')}}</span>

                    </div>

                    <div class="form-group @if(!empty($errors->first('email_confirmation'))) has-error @endif">
                        {!! Form::label('email_confirmation','Emailアドレス（確認用）') !!}
                        <input type="text" name="email_confirmation" value="{{old('email_confirmation')}}" class="form-control">
                        <span class="help-block">{{$errors->first('email_confirmation')}}</span>

                    </div>


                    <div class="form-group" style='display:none;'>
                        {!! Form::label('unsubscribe_day','退会年月') !!}
                        {!! Form::month('unsubscribe_day',old('unsubscribe_day'),['class'=>'form-control','value'=>'2999-12']) !!}
                    </div>

                    <div class="form-group">
                        <!-- 切り替えボタンの設定 -->
                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#Modal">
                            クレジットカードご利用規約を読む
                        </button>
                        <BR>
                        <input type="checkbox" name="agree_privacy" id="agree" value="" required="required" />
                        <label for="agree"> クレジットカードご利用規約を確認し、同意しました。</label>
                    </div>
                    <div class="form-group">
                        <button name="confirm" type="submit" id="submit" value="submit" class="disabled-btn btn btn-primary  btn-block" readonly="readonly">クレジットカード情報登録へ</button>
                    </div>
                {!! Form::close() !!}


  <!-- モーダルの設定 -->

  <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
    <!--以下modal-dialogのCSSの部分で modal-lgやmodal-smを追加するとモーダルのサイズを変更することができる-->
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="Modal">クレジットご利用規約について</h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <p>・クレジットカードの決済は、外部サイトより行います。</p>
            <p>・ご利用開始月は無料で利用頂くことができ、翌月XX日より毎月の利用代金（税別999円）をご請求させていただきます。</p>
            <p>・クレジットカードをご登録頂きますとアクチベーションが行われ、ご利用が可能となります。</p>
            <p>・ご利用を終了される場合はホームページより退会申し込みのお手続きをお願いいたします。<BR>
             アプリの削除だけでは月々の課金を停止することができませんので、<br>
                予めご注意下さいますようお願い申し上げます。</p>
            <p>・当サービスは月額決済のため、退会手続き時点でのご利用代金を日割りによる払い戻しはいたしません。<br>
                退会手続き後も月末までは継続してご利用頂けます。</p>
                <BR><BR>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
          <!--button type="button" class="btn btn-primary">確認いたしました</button -->
        </div>
      </div>
    </div>
  </div>
</div>
</div>

<script>
$(function() {
    $('#submit').prop('disabled', true);

    $('#agree').on('click', function() {
        if ($(this).prop('checked') == false) {
            $('#submit').prop('disabled', true);
        } else {
            $('#submit').prop('disabled', false);
        }
    });
});
</script>
<style>
     /*モーダルの背景の色※モーダル自体の背景ではない*/
     .modal-backdrop {
            background-color: gray;
     }
              /*モーダル全体の背景設定*/
              .modal-content {
            background: yellow;
        }

        /*モーダルのbody要素の背景設定*/
        .modal-body {
            background: white;
        }

</style>
@endsection