[JS] 자바스크립트로 버튼 비활성화 하기

 

 

 

 

 

1. 태그에 직접 disabled 입력

 

<input> 또는 <button> 태그를 사용한 버튼을 활성화/비활성화 할때는 disabled 속성을 이용한다.

( 회사에서 프론트 개발에 Vue.js 를 사용하는데 다양한 입력 태그에 disabled을 사용할 수 있다.)

 

See the Pen js by anna (@hianna) on CodePen.

<input type='button' value='활성화1' />  <!-- (1) -->
<input type='button' disabled value='비활성화1' />  <!-- (2) -->
<input type='button' disabled='disabled' value='비활성화2'/>  <!-- (3) -->

(1)  기본 input 태그에 항상 활성화 상태이다

(2)  input 태그에 disabled 속성을 명시하면 버튼이 비활성화된다.
(3)  isabled 속성에 어떤 값을 주면, 버튼은 활성화된다.
     disabled 속성에 값을 주면서 버튼을 비활성화 하려면 'disabled'라고 명시해 주어야 한다.

 

 

2. 자바스크립트를 통한 버튼 비활성화

 

See the Pen js by anna (@hianna) on CodePen.

<input type='button' value='활성화' onclick='btnActive()' />
<input type='button' value='비활성화' onclick='btnDisabled()' />
<!-- 버튼을 클릭할 때 btnActive(), btnDisabled() 함수 호출 -->

const target = document.getElementById('target_btn');
// (비)활성화 시킬 버튼 element를 선택

target.disabled = false;
target.disabled = true;
// 선택한 element의 disabled 값을 true/false로 설정
// disabled 값이 true이면 버튼이 비활성화, false이면 활성화 된다.

 

 

 

#참고사이트
https://hianna.tistory.com/477