jQuery / input, textarea, select에 disabled, readonly 추가하거나 제거하는 방법

input 등 양식에는 disabled를 추가하여 비활성화하거나 readonly를 추가하여 읽기 전용으로 만들 수 있습니다. jQuery를 이용하여 양식에 이러한 속성을 추가하는 방법을 정리합니다.

input type="text"

disabled 추가

다음은 입력 가능한 텍스트 양식입니다.

<input type="text">

jQuery의 .attr()로 disabled를 추가하여 비활성화합니다.

$( 'input[type=text]' ).attr( 'disabled', true );

렌더링 결과는 다음과 같습니다.

<input type="text" disabled="disabled">

disabled 제거

다음은 비활성화된 텍스트 양식입니다.

<input type="text" disabled>

jQuery의 .attr()로 disabled를 제거하여 활성화합니다.

$( 'input[type=text]' ).attr( 'disabled', false );

렌더링 결과는 다음과 같습니다.

<input type="text">

readonly 추가

다음은 입력 가능한 텍스트 양식입니다.

<input type="text">

jQuery의 .attr()로 dreadonly를 추가하여 읽기 전용으로 만듭니다.

$( 'input[type=text]' ).attr( 'readonly', true );

렌더링 결과는 다음과 같습니다.

<input type="text" readonly="readonly">

readonly 제거

다음은 읽기 전용인 양식입니다.

<input type="text" readonly>

jQuery의 .attr()로 readonly를 제거하여 입력 가능하게 만듭니다.

$( 'input[type=text]' ).attr( 'readonly', false );

렌더링 결과는 다음과 같습니다.

<input type="text">

input type="checkbox"

disabled 추가

다음은 체크 가능한 체크박스입니다.

<input type="checkbox">

jQuery의 .attr()로 disabled를 추가하여 비활성화합니다.

$( 'input[type=checkbox]' ).attr( 'disabled', true );

렌더링 결과는 다음과 같습니다.

<input type="checkbox" disabled="disabled">

disabled 제거

다음은 비활성화된 체크박스입니다.

<input type="checkbox" disabled>

jQuery의 .attr()로 disabled를 제거하여 활성화합니다.

$( 'input[type=checkbox]' ).attr( 'disabled', false );

렌더링 결과는 다음과 같습니다.

<input type="checkbox">

textarea

disabled 추가

다음은 입력 가능한 textarea입니다.

<textarea></textarea>

jQuery의 .attr()로 disabled를 추가하여 비활성화합니다.

$( 'textarea' ).attr( 'disabled', true );

렌더링 결과는 다음과 같습니다.

<textarea disabled="disabled"></textarea>

disabled 제거

다음은 비활성화된 textarea입니다.

<textarea disabled></textarea>

jQuery의 .attr()로 disabled를 제거하여 활성화합니다.

$( 'textarea' ).attr( 'disabled', false );

렌더링 결과는 다음과 같습니다.

<textarea></textarea>

readonly 추가

다음은 입력 가능한 textarea입니다.

<textarea></textarea>

jQuery의 .attr()로 readonly를 추가하여 읽기 전용으로 만듭니다.

$( 'textarea' ).attr( 'readonly', true );

렌더링 결과는 다음과 같습니다.

<textarea readonly="readonly"></textarea>

readonly 제거

다음은 읽기 전용인 textarea입니다.

<textarea readonly></textarea>

jQuery의 .attr()로 readonly를 제거하여 입력 가능하게 만듭니다.

$( 'textarea' ).attr( 'readonly', false );

렌더링 결과는 다음과 같습니다.

<textarea></textarea>

select

disabled 추가

다음은 선택 가능한 select입니다.

<select>
  <option>Lorem</option>
  <option>Ipsum</option>
</select>

jQuery의 .attr()로 disabled를 추가하여 비활성화합니다.

$( 'select' ).attr( 'disabled', true );

렌더링 결과는 다음과 같습니다.

<select disabled="disabled">
  <option>Lorem</option>
  <option>Ipsum</option>
</select>

disabled 제거

다음은 비활성화된 select입니다.

<select disabled>
  <option>Lorem</option>
  <option>Ipsum</option>
</select>

jQuery의 .attr()로 disabled를 제거하여 활성화합니다.

$( 'select' ).attr( 'disabled', false );

렌더링 결과는 다음과 같습니다.

<select>
  <option>Lorem</option>
  <option>Ipsum</option>
</select>