HTML/JS 버튼을 동적으로 활성화/비활성화하는 3가지 방법

안녕하세요, 개발자 여러분! 오늘은 웹 개발에서 자주 마주하는 상황, 바로 버튼을 동적으로 활성화/비활성화하는 방법에 대해 이야기해 보려고 합니다. 어떤 상황에서 필요한가요? 예를 들어, 회원가입 폼에서 사용자가 모든 필드를 올바르게 입력하지 않았다면, ‘제출’ 버튼을 비활성화하고 싶을 때가 있죠. 또는, 특정 조건을 만족했을 때 버튼이 활성화되도록 하고 싶을 때도 있을 거예요.

이제 다양한 방식으로 이를 구현하는 3가지 아이디어를 살펴보겠습니다!

1. HTML 속성 활용: `disabled` 속성

가장 기본적이면서도 직관적인 방법은 HTML의 disabled 속성을 활용하는 것입니다. 이 속성은 버튼을 클릭할 수 없도록 만들어 주며, 스타일도 자동으로 회색 처리되어 비활성화 상태임을 시각적으로 표시해줍니다.

<button id="submit-btn" disabled>제출</button>

자바스크립트로 동적으로 이 속성을 제어할 수 있습니다. 예를 들어, 모든 입력 필드가 채워졌을 때 버튼을 활성화하고 싶다면:

const submitBtn = document.getElementById('submit-btn');
const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
    input.addEventListener('input', () => {
        const allFilled = Array.from(inputs).every(i => i.value);
        submitBtn.disabled = !allFilled;
    });
});

이렇게 하면 모든 입력 필드가 채워져야만 제출 버튼이 활성화됩니다. 간단하면서도 직관적인 방법이죠!

2. CSS 클래스 토글하기

두 번째로 소개할 방법은 CSS 클래스를 활용하는 방법입니다. 버튼의 활성화/비활성화 상태에 따라 CSS 클래스를 추가하거나 제거하는 방식입니다. 예를 들어, 비활성화된 버튼을 회색으로, 활성화된 버튼을 파란색으로 스타일링할 수 있습니다.

<button id="submit-btn" class="btn-disabled">제출</button>

.btn-disabled {
    background-color: gray;
    pointer-events: none;
}

.btn-active {
    background-color: blue;
    color: white;
}

그리고 자바스크립트로 상태에 따라 클래스를 변경해줍니다.

const submitBtn = document.getElementById('submit-btn');
const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
    input.addEventListener('input', () => {
        const allFilled = Array.from(inputs).every(i => i.value);
        if (allFilled) {
            submitBtn.classList.remove('btn-disabled');
            submitBtn.classList.add('btn-active');
        } else {
            submitBtn.classList.remove('btn-active');
            submitBtn.classList.add('btn-disabled');
        }
    });
});

이 방법은 버튼의 상태를 디자인적으로 더 많이 제어할 수 있다는 장점이 있습니다. 비활성화뿐만 아니라 다양한 상태(예: 경고, 성공 등)를 시각적으로 표시하는 데도 유용합니다.

3. JavaScript 비동기 처리와 버튼 활성화

때로는 버튼을 클릭한 후 비동기 작업(예: API 요청) 동안 버튼을 일시적으로 비활성화하고, 작업이 완료되면 다시 활성화하는 패턴이 필요합니다. 사용자가 실수로 두 번 클릭하는 것을 방지하기 위한 용도로 많이 쓰입니다.

const submitBtn = document.getElementById('submit-btn');

submitBtn.addEventListener('click', async () => {
    submitBtn.disabled = true; // 비활성화
    submitBtn.textContent = '처리 중...'; // 버튼 텍스트 변경

    try {
        await fakeApiCall(); // 가짜 API 호출 (3초 대기)
        submitBtn.textContent = '완료!';
    } catch (error) {
        submitBtn.textContent = '다시 시도하세요.';
    } finally {
        submitBtn.disabled = false; // 다시 활성화
    }
});

function fakeApiCall() {
    return new Promise(resolve => setTimeout(resolve, 3000)); // 3초 후 완료
}

여기서 중요한 포인트는 버튼을 비동기 작업 동안 비활성화했다가, 작업이 완료되면 다시 활성화해 주는 것입니다. 이렇게 하면 사용자는 작업이 진행 중이라는 것을 직관적으로 알 수 있습니다.

결론

오늘은 웹 개발에서 자주 사용하는 동적 버튼 활성화/비활성화에 대해 세 가지 방법을 소개해 드렸습니다.

HTML의 disabled 속성을 활용해 간단하게 버튼 상태를 제어할 수 있고,
CSS 클래스를 사용해 시각적으로 더 많은 제어를 할 수 있으며,
JavaScript 비동기 처리와 함께 버튼을 관리하는 방법도 구현해보았습니다.

이 외에도 버튼을 제어하는 다양한 방법이 있지만, 이 세 가지 방법은 대부분의 상황에서 충분히 유용하게 쓰일 수 있을 거예요. 여러분의 프로젝트에 적합한 방법을 선택해 활용해 보세요! 😊

더 궁금한 점이나 추가적인 팁이 있다면 언제든지 댓글로 남겨주세요!

저작자표시

1. HTML 속성 활용: disabled 속성

2. CSS 클래스 토글하기

3. JavaScript 비동기 처리와 버튼 활성화

결론

티스토리툴바

1. HTML 속성 활용: `disabled` 속성