フォームでチェックしないと入力や送信ができないようにする

テキスト入力や送信ボタンを、特定の条件時に入力や送信ができないようにしてみます。

サンプルコード

HTML

<form action="">
	<div class="form-item">
		<input type="checkbox" name="other" id="other-check" />その他
		<input type="text" name="other-text" id="other-text" />
	</div>
	<div class="form-item">
		<input type="checkbox" name="agree" id="agree-check" />利用規約に同意する
	</div>
	<div class="btn">
		<input type="submit" value="送信" id="submit-btn" />
	</div>
</form>

JavaScript

$(function() {
	otherText();
	agreeText();

	$(':checkbox').change(function(){
		otherText();
		agreeText();
	});
});

function otherText() {
	if($('#other-check').is(':checked')) {
		$('#other-text').prop('disabled', false);
	} else {
		$('#other-text').prop('disabled', true);
	}

}
function agreeText() {
	if($('#agree-check').is(':checked')) {
		$('#submit-btn').prop('disabled', false);
	} else {
		$('#submit-btn').prop('disabled', true);
	}
}

ページアクセス時とチェックボックス変更時に、それぞれのチェックボックスにチェックが入っているかどうかを確認します。
チェックが入っていた場合はdisabledを追加、チェックが入っていない場合はdisabledを削除しています。
入力や送信ができないようにするデモページ
　

【参考サイト】

• 小粋空間: input 要素の disabled 属性と readonly 属性の違い
• submit（送信ボタン）
• HTML – jQueryのprop()でdisabledを切り替える – Qiita