본문 바로가기
FrontEnd/HTML

<input> 태그의 disabled 속성 / <form>으로 저장 시 해제 필요

by 성은2 2021. 7. 2.

속성 설명

disabled 속성이 명시된 <input> 요소는

1. 사용할 수 없으며

2. 사용자가 클릭할 수도 없다.

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

 

따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있습니다.

 

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

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

 

즉, disabled 속성을 사용하기 위해서는 input 태그에 명시해주면 된다.

 

 

 

구문

<input type="text" name="department" disabled><br>

 

 

 

주의 : 저장시 disabled 속성 제거

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

<form> 에 id를 준 후, ajax에서 serialize로 값을 보낼때도 제출되지 않는다.

 

? form을 사용하지 않고 배열형태의 변수에 값을 담아서 넘길때는 넘어가는듯 하다. 더 공부 필요..

 

<%-- disabled 된 출석점수 저장을 위해서 disabled 취소--%>
$('input[name=aPoint]').attr('disabled', false);

 

<%-- 저장 이후 출석점수를 다시 disabled 처리 --%>
$('input[name=aPoint]').attr('disabled', true);

'FrontEnd > HTML' 카테고리의 다른 글

[HTML] radio button  (0) 2021.05.03