[jQuery + CakePHP] Cake製のお問い合わせフォームでチェックボタンによってsubmitのdisableを切り替える処理で1ヶ所意図しない挙動が起きる

Question

[前提]

• jQuery
• CakePHP

機能の要件

• チェックボックスのオンオフでsubmitボタンを切り替える　→ 実装済
• submitを押した時入力不備がある場合バリデーションチェックがかかる　→ 実装済
• バリデーションチェックがかかっても値が保持される　→ 実装済

意図しない挙動

順を追って書きます。

①初期画面（問題なし）

• プライバシーポリシーに同意するチェック　オフ
• 確認するボタン disable true（確認ボタンは押せない）

②プライバシーポリシーに同意するチェック（問題なし）

• プライバシーポリシーに同意するチェック　オン
• 確認するボタン disable false（確認ボタン押せる）

③確認するボタンをクリックし、バリデーションチェック後（問題あり）

• プライバシーポリシーに同意するチェック　オン
• 確認するボタン disable true（確認ボタンは押せない）　→ チェックがオンのままなのにtrueになってしまう

コード抜粋

		<div class="formSet2">
			<div class="formItem">
				<div class="radioItem centerRadioItem">
					<div class="check">
						<?php echo $form->input('agree', array('type' => 'checkbox', 'class' => 'contact_method', 'options' => $select_data['agree'], 'label' => false)); ?>
						<label class="agreeText" for="ContactAgree"><a href="/privacy" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意する</label>
					</div>
				</div>
			</div>
		</div>
		
		<div class="btnWrapper">
			<input type="hidden" name="mode" value="input">
			<input type="button" value="確認する" class="btn morebtn" id="entryBtn" name="data[btnSubmit]" onclick="submit();" />
		</div>

$(function(){
    // 同意ボタンが押されかったらdisableにする
    $('#entryBtn').prop('disabled', true); 
    $('.contact_method').change(function() {
        if ( $(this).is(':checked') ){ 
            $('#entryBtn').prop('disabled', false);
        } else { 
            $('#entryBtn').prop('disabled', true); 
        }
    });
});

Answer 1

$(function(){
    // 同意ボタンが押されかったらdisableにする
    $('#entryBtn').prop('disabled', true); 
    $('.contact_method').change(function() {
        if ( $(this).is(':checked') ){ 
            $('#entryBtn').prop('disabled', false);
        } else { 
            $('#entryBtn').prop('disabled', true); 
        }
    }).trigger('change');
});

Comments

[DaisukeMori]

ありがとうございます。

無事動きました。