<input> 태그의 disabled 속성

정의 : <input> 태그의 disabled 속성은 해당 <input> 요소가 비활성화됨을 명시

 

특징 :

disabled 속성이 명시된 <input> 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없습니다.

또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 <input> 요소의 데이터는 제출되지 않습니다.

 

따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고,

특정 조건이 충족되면

자바스크립트 등으로 disabled 속성값을 삭제 

사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있습니다.

 

disabled 속성은 불리언(boolean) 속성입니다.

불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며,

명시하면 자동으로 true 값을 가지게 됩니다.

 

코드 :

not_know.addEventListener('click', e=> {

            // 1. 모름을 클릭했을시 checked : true면
            if(e.target.checked) {
            
                1. 속성값에 true를 대입
                year.disabled = true;
                month.disabled = true;
                
                2. 속성값을 설정
                year.setAttribute('disabled', true);
				month.setAttribute('disabled', true);

            } else {
            
		1. 속성값에 false를 대입
                year.disabled = false;
                month.disabled = false;
                
                2. 속성값을 삭제
                year.removeAttribute('disabled');
                month.removeAttribute('disabled');

            }