웹 개발을 하다 보면 사용자 인터페이스(UI)에서 버튼을 동적으로 활성화하거나 비활성화해야 할 때가 자주 있습니다. 예를 들어, 폼이 올바르게 작성되지 않은 경우 제출 버튼을 비활성화하거나, 특정 작업이 완료된 후에 버튼을 활성화해야 할 수 있습니다. 이번 포스트에서는 자바스크립트를 이용해 HTML 버튼 요소를 동적으로 활성화 또는 비활성화하는 방법을 알아보겠습니다.
1. 기본 HTML 구조
먼저, 예제에서 사용할 기본 HTML을 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Enable/Disable Example</title>
</head>
<body>
<form id="myForm">
<label for="inputField">Enter something:</label>
<input type="text" id="inputField" oninput="checkInput()">
<button id="submitButton" disabled>Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>위의 HTML은 간단한 폼과 텍스트 입력 필드, 그리고 제출 버튼을 포함하고 있습니다. 텍스트 입력 필드에 내용이 입력될 때마다 checkInput() 함수가 호출됩니다.
2. 자바스크립트 코드
이제, 자바스크립트를 사용해 입력 필드에 내용이 입력되었는지 확인하고, 이에 따라 버튼을 활성화 또는 비활성화하는 방법을 살펴보겠습니다.
// script.js 파일 내용
function checkInput() {
// 입력 필드와 버튼 요소를 가져옵니다.
const inputField = document.getElementById('inputField');
const submitButton = document.getElementById('submitButton');
// 입력 필드에 내용이 있는지 확인합니다.
if (inputField.value.trim() !== '') {
// 입력 필드가 비어 있지 않으면 버튼을 활성화합니다.
submitButton.disabled = false;
} else {
// 입력 필드가 비어 있으면 버튼을 비활성화합니다.
submitButton.disabled = true;
}
}위 코드에서 checkInput 함수는 입력 필드의 값을 확인하고, 공백을 제외한 값이 존재하면 버튼을 활성화(disabled = false), 그렇지 않으면 비활성화(disabled = true)합니다.
3. 추가 예제: 다른 조건에 따른 버튼 제어
다른 조건에 따라 버튼을 제어하는 예제도 살펴보겠습니다. 예를 들어, 두 개의 체크박스가 모두 선택되었을 때만 버튼을 활성화하는 경우입니다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Enable/Disable Example</title>
</head>
<body>
<form id="myForm">
<label>
<input type="checkbox" id="checkbox1" onclick="checkCheckboxes()"> Checkbox 1
</label>
<br>
<label>
<input type="checkbox" id="checkbox2" onclick="checkCheckboxes()"> Checkbox 2
</label>
<br>
<button id="submitButton" disabled>Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>자바스크립트 코드
// script.js 파일 내용
function checkCheckboxes() {
// 체크박스와 버튼 요소를 가져옵니다.
const checkbox1 = document.getElementById('checkbox1');
const checkbox2 = document.getElementById('checkbox2');
const submitButton = document.getElementById('submitButton');
// 두 체크박스가 모두 선택되었는지 확인합니다.
if (checkbox1.checked && checkbox2.checked) {
// 두 체크박스가 모두 선택되었으면 버튼을 활성화합니다.
submitButton.disabled = false;
} else {
// 그렇지 않으면 버튼을 비활성화합니다.
submitButton.disabled = true;
}
}위 코드에서 checkCheckboxes 함수는 두 체크박스의 상태를 확인하여 둘 다 선택된 경우에만 버튼을 활성화합니다.
결론
이 포스트에서는 자바스크립트를 이용해 HTML 버튼 요소를 동적으로 활성화 또는 비활성화하는 방법에 대해 알아보았습니다. 폼의 입력 필드나 체크박스 상태에 따라 버튼을 제어하는 것은 사용자 경험을 개선하는 데 중요한 요소입니다. 이 방법들을 활용하여 더 나은 웹 애플리케이션을 개발해 보세요!