728x90
1. disabled 속성이란?
disabled 속성은 HTML 요소(주로 <input>, <select>, <textarea>, <button> 등)에서 해당 요소를 비활성화할 때 사용됩니다. 비활성화된 요소는 사용자가 클릭하거나 데이터를 입력할 수 없으며, 스타일에 따라 시각적으로도 비활성화된 상태임을 나타냅니다.
HTML 예시
<input type="text" disabled>
위의 코드를 보면 <input> 요소는 disabled 속성으로 인해 비활성화되어 있습니다. 사용자는 이 입력 필드에 데이터를 입력할 수 없습니다.
2. JavaScript로 disabled 속성 제어하기
JavaScript를 사용하면 특정 이벤트나 조건에 따라 disabled 속성을 동적으로 제어할 수 있습니다. JavaScript에서는 disabled 속성을 true 또는 false로 설정하여 요소를 비활성화하거나 활성화할 수 있습니다.
예제: JavaScript로 disabled 속성 활성화 및 비활성화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript disabled 속성 예제</title>
</head>
<body>
<h1>JavaScript로 Disabled 속성 제어</h1>
<input type="text" id="myInput" value="여기에 입력할 수 있습니다">
<button onclick="disableInput()">비활성화</button>
<button onclick="enableInput()">활성화</button>
<script>
function disableInput() {
document.getElementById("myInput").disabled = true;
}
function enableInput() {
document.getElementById("myInput").disabled = false;
}
</script>
</body>
</html>설명:
- 비활성화 버튼: disableInput() 함수는 myInput 요소의 disabled 속성을 true로 설정하여 입력 필드를 비활성화합니다.
- 활성화 버튼: enableInput() 함수는 myInput 요소의 disabled 속성을 false로 설정하여 입력 필드를 다시 활성화합니다.
핵심 코드:
document.getElementById("myInput").disabled = true; // 비활성화
document.getElementById("myInput").disabled = false; // 활성화
3. jQuery로 disabled 속성 제어하기
jQuery는 JavaScript를 더 간단하고 직관적으로 사용할 수 있게 도와주는 라이브러리입니다. jQuery를 사용하면 더욱 간결한 코드로 disabled 속성을 제어할 수 있습니다.
jQuery로 disabled 속성 설정하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery disabled 속성 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>jQuery로 Disabled 속성 제어</h1>
<input type="text" id="myInput" value="여기에 입력할 수 있습니다">
<button id="disableBtn">비활성화</button>
<button id="enableBtn">활성화</button>
<script>
$(document).ready(function() {
// 비활성화 버튼 클릭 시
$("#disableBtn").click(function() {
$("#myInput").attr("disabled", true); // 비활성화
});
// 활성화 버튼 클릭 시
$("#enableBtn").click(function() {
$("#myInput").attr("disabled", false); // 활성화
});
});
</script>
</body>
</html>설명:
- 비활성화 버튼: #disableBtn 버튼을 클릭하면 #myInput 입력 필드에 disabled 속성이 추가되면서 비활성화됩니다.
- 활성화 버튼: #enableBtn 버튼을 클릭하면 disabled 속성이 제거되어 입력 필드가 다시 활성화됩니다.
핵심 코드:
$("#myInput").attr("disabled", true); // 비활성화
$("#myInput").attr("disabled", false); // 활성화
jQuery의 .attr() 메서드를 사용하여 HTML 요소의 속성을 쉽게 제어할 수 있습니다. disabled 속성을 true로 설정하면 비활성화되고, false로 설정하면 활성화됩니다.
4. jQuery의 prop() 메서드 사용하기
jQuery에서는 속성을 설정할 때 .attr() 외에도 .prop() 메서드를 사용할 수 있습니다. .prop()은 속성의 진짜 논리값(boolean)을 제어할 때 더 권장되는 방식입니다.
예제: prop() 메서드를 사용한 disabled 속성 제어
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery prop()으로 disabled 속성 제어</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>jQuery prop() 메서드로 Disabled 속성 제어</h1>
<input type="text" id="myInput" value="여기에 입력할 수 있습니다">
<button id="disableBtn">비활성화</button>
<button id="enableBtn">활성화</button>
<script>
$(document).ready(function() {
// 비활성화 버튼 클릭 시
$("#disableBtn").click(function() {
$("#myInput").prop("disabled", true); // 비활성화
});
// 활성화 버튼 클릭 시
$("#enableBtn").click(function() {
$("#myInput").prop("disabled", false); // 활성화
});
});
</script>
</body>
</html>설명:
- .prop() 메서드는 속성의 논리적 상태를 설정하는 데 더 적합한 방법입니다. attr() 메서드와 유사하게 동작하지만, 논리값 속성(예: disabled, checked 등)에는 .prop()을 사용하는 것이 좋습니다.
5. 정리
이번 포스트에서는 JavaScript와 jQuery를 사용하여 HTML 요소의 disabled 속성을 동적으로 제어하는 방법을 알아보았습니다. 아래와 같이 각각의 장점을 요약할 수 있습니다:
- JavaScript:
- 기본적으로 모든 브라우저에서 동작하는 표준 방법.
- 복잡한 라이브러리 없이 사용할 수 있습니다.
- jQuery:
- 코드가 간결하고 가독성이 좋습니다.
- 다양한 브라우저 호환성과 추가 기능을 제공합니다.
- .prop() 메서드는 논리값 속성을 더 안전하게 제어할 수 있습니다.
LIST
'Develop' 카테고리의 다른 글
| [Thymeleaf] 조건문 switch-case 문법 사용방법 (8) | 2024.10.22 |
|---|---|
| [PostgreSQL] 숫자를 금액단위 3자리마다 콤마로 변환하는 방법 (8) | 2024.10.22 |
| [JavaScript] Cookie 쿠키를 저장하고 불러오는 방법 (7) | 2024.10.22 |
| [PostgreSQL] 여러행을 한줄로 조회 Row to Column (11) | 2024.10.21 |
| [JavaScript] 소수점 올림, 버림, 반올림 사용방법 (6) | 2024.10.21 |