체크박스로 버튼 활성화 checkbox oncheck enable button, 약관동의 체크박스 만들기

웹개발을 하다보면 회원가입시, 혹은 상품 구매시에 상기 내용을 확인하였는지 질문 후에

동의하는 체크박스를 체크하였을 때에만 버튼이 활성화 되게끔 해야하는 경우가 있습니다.

 

ex) 결제 전 내용 확인

ex) 회원 가입 전 terms and conditions(약관 동의) 체크박스

 

오늘을 이를 쉽게 할 수 있는 코드를 공유드리려고 해요

 

 

See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen.

 

<코드 설명>

1. onchange="document.getElementById('submitting_button').disabled = !this.checked;"

체크박스에 변화가 있을 시, submitting_button 이라는 아이디를 가진 element의 disabled 속성값이 이 체크박스(this)의 체크값과 반대가 되도록 해라 (true/false) : 체크가 안되어있는(false)의 경우는 버튼의 disabled가 false의 반대인 true가 되도록 한다.

 

2. <input type="submit" id="submitting_button" value="제출" disabled/>

이 버튼의 id는 submitting_button 이고, 기본적으로 disabled 가 되어있도록 한다