スクロールが一番下まで行くとチェックボックスをクリックできるようにする方法

会員規約ページなどで規約部分を読みながらスクロールを一番下まで移動させるとディセーブル（無効）になっている「同意」ボタンなどがアクティブになりボタンが押せるようになるページをよく見かけることがあると思います。

今回は一番下までスクロールするとチェックできなかったチェックボックスがチェックできるようになるサンプルを用意しました。

おもにスクロールの移動による処理とチェックボックスのディセーブルとアクティブになる処理になります。

スクロールが一番下までいくとチェックボックスがチェックできるようになる方法

html

<input type="checkbox" id="checkbox1"><label for="checkbox1">チェックボックス</label> 

jQuery

jQuery(function(){
	jQuery('input[type=checkbox]').prop('disabled', true);
	jQuery(window).bind("scroll", function() {
		document_ht = jQuery(document).height(); //コンテンツの高さを取得
		scroll_position = jQuery(window).height() + jQuery(window).scrollTop();

		if ((document_ht - scroll_position) / scroll_position <= 0.03) {
			jQuery('input[type=checkbox]').prop('disabled', false);
        	}
	});
});

inputをディセーブルにする

まずinputをディセーブルにするにはpropメソッドを使ってdisabledをtrueにします。

jQuery('input[type=checkbox]').prop('disabled', true);

スクロールが動いたときに処理する

jQuery(window).bind("scroll", function() {
	～スクロールを移動したときの処理～
});

コンテンツの高さを取得する

コンテンツの高さを取得するにはdocumentを使い高さを取得します。

document_ht = jQuery(document).height();

スクロールの位置を取得する

scroll_position = jQuery(window).height() + jQuery(window).scrollTop();

サンプル