정의 및 사용 방법

disabled 속성은
해당 요소나 해당 요소에 포함되어 있는 컨트롤 요소들을 비활성화합니다.

컨트롤 요소란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <select>, <button> 등은 데이터를 입력하거나 선택, 클릭할 수 있는 대표적인 컨트롤 요소입니다.

disabled 속성으로 비활성화된 컨트롤 요소는 다음과 같은 특징을 가집니다.

  • 입력, 클릭, 선택 등 사용자가 요소와 상호작용하는 기능이 차단됩니다.
  • 사용자의 키보드 탭(tab) 포커스 탐색에서 제외됩니다.
  • 비활성화된 폼 요소의 값은 폼 제출 시 서버로 전송되지 않습니다.
  • 대부분의 브라우저에서는 비활성화된 요소를 기본적으로 회색톤으로 표시해서 시각적으로 비활성 상태임을 나타냅니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

기본 예제

HTML 
<fieldset>
    <legend>요금제 선택하기</legend>
    <label><input type="radio" name="plan">베이직</label>
    <label><input type="radio" name="plan">프로</label>
    <label><input disabled type="radio" name="plan">프리미엄 (현재 신청 불가)</label>
</fieldset>
실제 적용된 모습

위 예제에서는 '프리미엄' 요금제가 현재 신청 불가 상태이므로, 해당 라디오 버튼에 disabled 속성을 적용했습니다. 이처럼 사용자가 선택할 수 없는 옵션은 처음부터 비활성화하여 실수를 방지할 수 있습니다.

참고하세요!
disabled 속성이 설정된 요소는 사용자에 의한 직접적인 상호작용은 차단되지만, 자바스크립트를 통해 프로그래밍적으로 값을 변경하거나 상태를 조작하는 것은 가능합니다.

disabled 속성이 사용 가능한 요소

disabled 속성은 모든 요소에 적용할 수 있는 글로벌 속성이 아닙니다.
주로 사용자 입력과 상호작용을 담당하는 폼 관련 요소에 사용할 수 있습니다.

해당 요소를 비활성화하는 요소

해당 요소에 포함된 컨트롤 요소들을 비활성화하는 요소

disabled 속성이 사용 불가능한 요소

disabled 속성이 모든 컨트롤 요소나 사용자와 상호 작용하는 요소에 사용 가능할 것 같지만 다음의 요소에서는 지원하지 않습니다.

<a>

<a> 태그는 대표적인 사용자와 상호 작용하는 요소입니다. 하지만 disabled 속성을 지원하지 않습니다.

즉, HTML 속성만으로 <a> 태그를 disabled처럼 완전히 비활성화하는 방법은 존재하지 않습니다. 하지만 HTML 속성, CSS, 자바스크립트 등을 활용하여 일부 기능을 제한하거나 사용자의 접근을 막을 수는 있습니다.

tabindex 속성으로 탭(tab) 포커스 탐색에서 제외시키기

tabindex 속성에 음수 값(예: -1)을 설정하면 해당 요소는 키보드 탭(tab) 탐색 순서에서 제외됩니다. 사용자가 탭 키를 눌러도 이 요소에는 포커스가 이동하지 않습니다.

HTML 
<a href="/page.html" tabindex="-1">페이지 이동</a>
CSS의 pointer-events 속성으로 포인터 이벤트 제어하기

CSS의 pointer-events 속성으로 <a> 태그의 포인터 이벤트(클릭, 호버 등)를 제어할 수 있습니다.

CSS 
a {
    pointer-events: none;
}
자바스크립트로 클릭 이벤트 제어하기

자바스크립트를 사용하면 클릭이나, 호버 등의 기본 이벤트를 제어할 수 있습니다.

JavaScript 
document.querySelector("a").addEventListener("click", e => e.preventDefault());

contenteditable 속성으로 편집 가능한 요소

contenteditable 속성은 해당 요소의 콘텐츠를 사용자가 직접 수정할 수 있도록 만들어주는 속성입니다. 하지만 이 요소에는 disabled 속성이 적용되지 않습니다.

disabled와 readonly 속성의 차이점

disabled와 readonly 속성은 모두 사용자와의 상호작용을 제한하는 데 사용되지만, 적용 대상과 동작 방식에 뚜렷한 차이가 있습니다. 이 두 속성의 차이를 명확히 이해하면 상황에 따라 적절한 속성을 사용할 수 있습니다.

disabled와 readonly 속성의 차이점
비교 disabled readonly
사용 목적 해당 요소를 사용자로부터 완전히 비활성화해야 할 때 사용자에게 입력하거나 선택한 값을 읽기 전용으로 보여줄 때
폼 제출 시 서버로 전송 값이 전송되지 않음 값이 전송됨

접근성 고려 사항

disabled 속성의 사용 유무만으로는 기능적인 접근성에는 문제가 없습니다.
하지만, 사용자에게 비활성 상태를 시각적으로 명확히 전달하기 위해 CSS 스타일(예: 회색 처리, 불투명도 조절 등)이 반드시 적용되어 있습니다.

브라우저 호환성

disabled 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
disabled 예 예 예 예

명세서

disabled 속성의 명세서 사양
명세서 사양
disabled HTML
#attr-fe-disabled
disabled HTML
#attr-optgroup-disabled
disabled HTML
#attr-option-disabled

참고문헌

같이 보기