• HTML
  • CSS
  • J볃교

은행처럼 약관을 다 읽을 시 체크박스 활성화 시키는 소스

2019-07-01 622

설명

  • 카카오톡 링크

은행처럼 약관동의를 제일 밑까지 내려야 밑에있는 체크박스를 클릭할 수 있는 소스입니다~!

※ 체크박스에 있는 빨강색 글씨가 없어지면(약관이 다 내려왔을 시) 체크박스가 활성화 됩니다!

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style type="text/css">
	h2.title {text-align:left; font-size:18px; font-weight:700; color:#000; margin-bottom:14px;}
	.terms_box {display:inline-block; width:100%; height:275px; overflow-y:scroll; box-sizing:border-box; border:1px solid #e6e6e6; padding:29px 28px;  font-size:14px; font-weight:400; color:#1a1a1a}
	.terms_box textarea {}
	.terms_box pre { width:100%; overflow:hidden; word-break:break-all; word-break:break-word; line-height:1.4em; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; color:#1a1a1a; font-size:14px; font-weight:400; margin-top:0; margin-bottom:0 }

	.checkbox_type1 {margin-top:7px}
	.checkbox_type1 input[type=checkbox] {display: none;}
	.checkbox_type1 input[type=checkbox] + label{word-wrap:break-word; word-break:keep-all; display: inline-block; cursor: pointer; position: relative; padding-left: 20px; font-size:14px; color:#404040; line-height:25px;letter-spacing:-0.05em; font-weight:300; }
	.checkbox_type1 input[type=checkbox]+ label:before {  content: ""; display: inline-block; width:16px; height:16px; margin-right:10px;position: absolute;  left: 0;top:3px; background-color: #fff; border-radius: 3px; border:1px solid #ccc}
	.checkbox_type1 input[type=checkbox]:checked + label:before { content: "";text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 11px; font-weight: 800; color: #fff; background: #fff; text-align: center; line-height: 13px; background:#f2849e} 

	label.none_view {color:red !important}

	.focus_box {display:inline-block; width:100%; height:100%; cursor:default}
</style>
	<h2 class="title"> 약관동의1</h2>
<a href="javascript:;" class="focus_box">
	<div class="terms_box">
		<pre>약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.
약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.약관입니다.</pre>
	</div>
</a>

<div class="checkbox_type1">
	<input type="checkbox" id="chk1" disabled="disabled">
	<label for="chk1" class="none_view" data-text="약관동의1">약관동의1에 동의합니다.</label>
</div>


<script type="text/javascript">
$(document).ready(function() {
	$(document).on("click",".none_view", function() {
		var msg = $(this).attr("data-text");
		$(this).parent().parent().find("a").focus();
		alert(msg+"을(를) 읽고서 동의합니다를 눌러주세요");
	});

	$(".terms_box").scroll(function() {
		var scroll = $(this).scrollTop();
		var box_height = $(this).find("pre").height() - 250;
		//console.log(scroll + "/" + box_height);
		if( scroll > box_height) {
			$(this).parent().parent().find("input[type='checkbox']").attr('disabled', false);;
			$(this).parent().parent().find("label").removeClass("none_view");
		}
	});
});
</script>