HTML disabled 속성

disabled 속성이 폼 컨트롤 요소에 지정되면 해당 요소와 하위 폼 컨트롤 요소들은 제약 조건 검증에 참여하지 않습니다. 브라우저는 종종 해당 컨트롤들을 회색으로 나타내고 마우스 클릭이나 포커스와 관련된 브라우징 이벤트를 수신하지 않습니다.

disabled 속성은 <button>, <fieldset>, <optgroup>, <option>, <select> (en-US), <textarea> (en-US), <input> (en-US) 에서 지원됩니다.

참과 거짓 중 하나의 값을 갖는 비활성화 속성은 사용자가 컨트롤 또는 하위 컨트롤들과 상호작용할 수 없음을 의미합니다. 이 속성이 지정되지 않은 경우 컨트롤은 상위 요소, 예를 들어 fieldset에서 설정을 상속받습니다. disabled 속성이 설정된 상위 요소가 없고, 컨트롤도 해당 속성을 갖지 않는다면 컨트롤이 활성화됩니다. <optgroup>에 선언되었을 경우 선택 요소와는 여전히 상호작용이 가능하지만 (다른 요소들은 비활성화되지 않았을 때), 옵션 그룹 내의 어떤 항목도 선택할 수 없습니다.

지원하는 요소에 disabled 속성이 적용되면 :disabled 의사 클래스가 해당 요소에 적용됩니다. 반대로 disabled 속성을 지원하지만 속성이 설정되지 않은 요소는 :enabled 의사 클래스가 적용됩니다.

이 불리언 속성은 사용자가 버튼과 상호작용하는 것을 방지합니다. 해당 속성이 지정되지 않은 경우에도 <fieldset> 과 같은 상위 요소에 의해 버튼이 여전히 비활성화된 상태일 수도 있습니다. 만약 disabled 속성이 지정된 상위 요소가 없다면 버튼이 활성화됩니다.

Firefox는 다른 브라우저들과 달리 페이지를 불러올 때마다 <button> 의 동적 비활성화 상태를 유지합니다. 이 기능을 제어하기 위해서는 autocomplete 속성을 사용합니다.

disabled와 readonly (en-US)의 차이는 읽기 전용으로 지정된 컨트롤은 여전히 동작하고 포커스가 가능하다는 반면, 비활성화된 컨트롤은 포커스를 받거나 폼과 함께 제출되지 않고 일반적으로 활성화될 때까지 컨트롤로서 동작하지 않는다는 것입니다.

비활성화된 필드는 그 값이 변경될 수 없기 때문에, required (en-US)는 disabled 속성이 지정된 입력 필드에 아무 영향도 미치지 않습니다. 또한 요소들이 변경 불가능하게 되므로 pattern (en-US) 과 같은 대부분의 다른 속성들도 컨트롤이 활성화될 때까지 영향을 미치지 않습니다.

브라우저는 비활성화된 폼 컨트롤들을 회색으로 표시합니다. 비활성화된 폼 컨트롤은 변경되거나 폼과 함께 제출되지 않으며, 마우스 클릭이나 포커스와 관련된 브라우징 이벤트를 수신하지 않습니다.

지원하는 요소에 존재하는 경우 :disabled 의사 클래스가 적용됩니다. 해당 속성이 지정되지 않았을 경우에는 :enabled 의사 클래스가 적용됩니다. 요소가 비활성화 속성을 지원하지 않는 경우에는 해당 속성이 어떤 효과도 갖지 않으며, :disabled 와 :enabled 의사 클래스도 적용되지 않습니다.

요소가 disabled 상태일 경우 해당 요소의 값은 포커스를 받거나 사용자에 의해 값이 변경될 수 없으며, 제약 조건 검증에도 참여하지 않습니다.

많은 브라우저들은 기본적으로 폼 컨트롤이 비활성화되면 이를 더 밝은 회색의 색상으로 표시합니다. 다음은 비활성화된 체크박스, 라디오 버튼, <option>, <optgroup>의 예시이며, 상위 <fieldset> 요소에 적용된 disabled 속성에 의해 비활성화된 일부 폼 컨트롤의 예시입니다. <option>들은 비활성화되지만 <select> (en-US)은 그렇지 않습니다. <select> (en-US) 전체를 비활성화하기 위해서는 하위 요소가 아닌 해당 요소에 속성을 추가해야 합니다.

<fieldset>
  <legend>체크박스</legend>
  <p>
    <label> <input type="checkbox" name="chbox" value="regular" /> 일반 </label>
  </p>
  <p>
    <label>
      <input type="checkbox" name="chbox" value="disabled" disabled /> 비활성
    </label>
  </p>
</fieldset>

<fieldset>
  <legend>라디오 버튼</legend>
  <p>
    <label> <input type="radio" name="radio" value="regular" /> 일반 </label>
  </p>
  <p>
    <label>
      <input type="radio" name="radio" value="disabled" disabled /> 비활성
    </label>
  </p>
</fieldset>

<p>
  <label
    >옵션 선택:
    <select>
      <optgroup label="그룹 1">
        <option>옵션 1.1</option>
      </optgroup>
      <optgroup label="그룹 2">
        <option>옵션 2.1</option>
        <option disabled>옵션 2.2</option>
        <option>옵션 2.3</option>
      </optgroup>
      <optgroup label="그룹 3" disabled>
        <option>비활성 3.1</option>
        <option>비활성 3.2</option>
        <option>비활성 3.3</option>
      </optgroup>
    </select>
  </label>
</p>

<fieldset disabled>
  <legend>비활성 fieldset</legend>
  <p>
    <label>
      이름: <input type="radio" name="radio" value="regular" /> 일반
    </label>
  </p>
  <p>
    <label>숫자: <input type="number" /></label>
  </p>
</fieldset>

• :disabled and :enabled