jQuery로 버튼 비활성화하기: prop() 메서드 완벽 가이드

jQuery로 버튼을 비활성화해야 하는 이유

웹 애플리케이션에서 버튼을 비활성화해야 하는 경우는 생각보다 많습니다. 품절된 상품을 장바구니에 담지 못하도록 막거나, 특정 작업이 수행된 후 사용자가 버튼을 다시 클릭하지 못하게 하는 것이 대표적인 예입니다. 그런데 jQuery에는 버튼을 직접 비활성화하는 전용 메서드가 존재하지 않습니다.

대신 prop() 메서드를 사용합니다. 이 메서드는 jQuery 1.6에서 새롭게 추가된 기능으로, 선택한 요소의 프로퍼티(property) 값을 가져오고 설정하기 위해 도입되었습니다. 이전에는 attr() 메서드로 어트리뷰트(attribute) 값을 조회했습니다.

그런데 하나의 메서드가 어트리뷰트 값과 프로퍼티 값을 모두 처리하다 보니 결과가 예측 불가능한 경우가 종종 발생했습니다. 이러한 혼란을 해결하기 위해 jQuery 1.6부터 prop() 메서드가 도입된 것입니다. HTML 버튼 요소에서 "disabled"는 어트리뷰트가 아닌 프로퍼티 값이므로, 버튼을 비활성화할 때는 prop()를 사용하는 것이 올바른 방법입니다.

prop() 메서드 문법

prop()를 왜, 어떻게 사용하는지 살펴봤으니 이제 문법을 확인해 보겠습니다. prop() 역시 다른 jQuery 메서드와 마찬가지로 선택된 요소에 호출됩니다. 여기서는 버튼이 대상입니다. id가 "btn"인 버튼을 비활성화하는 과정을 단계별로 살펴보겠습니다.

먼저 다음과 같이 HTML로 버튼을 만듭니다.

<button id='btn' type='submit'>
Button is Disabled
</button>

위 코드는 화면에 다음과 같이 버튼을 렌더링합니다.

버튼이 정상적으로 렌더링되었습니다. 이제 jQuery의 prop()를 사용해 "disabled" 프로퍼티 값을 true로 설정해 보겠습니다.

$('#btn').prop('disabled', true)

코드에서 볼 수 있듯이 prop()는 첫 번째 인자로 프로퍼티 이름을 문자열로 받고, 두 번째 인자로 boolean 값(true 또는 false)을 전달합니다.

"disabled" 프로퍼티를 true로 설정하면 클릭할 수 없는 버튼이 렌더링됩니다. 문법을 이해했으니, 이제 어떤 상황에서 이 기능을 활용하면 좋은지 알아보겠습니다. 다음 섹션에서는 상품에 "품절(sold-out)" 속성이 있는 온라인 쇼핑몰 예제를 다뤄보겠습니다.

jQuery prop()로 버튼 비활성화 실전 예제

이번 예제는 품절된 상품의 "장바구니 담기" 버튼을 자동으로 비활성화하는 쇼핑 앱입니다. 먼저 간단한 HTML 버튼과, 품절되지 않은 경우 상품명을 추가할 <div>를 렌더링하겠습니다.

<button class='add' type='submit'>
Add to Cart
</button>

<div>

</div>

렌더링된 버튼은 다음과 같습니다.

이제 상품 객체와 콜백 함수(다른 함수에 인자로 전달되어 나중에 호출되는 함수)를 만들어, 위 <div>에 장바구니 내용을 표시하겠습니다. 상품이 품절되면 버튼이 비활성화되도록 조건문을 함께 작성합니다.

const product = {
name: 'Jacket',
price: 50.00,
soldOut: false
}


$(document).ready(function() {
 $('button.add').click(function(event) {
   event.preventDefault()
   alert(JSON.stringify(product.soldOut))
   if (product.soldOut) {
   $('.add').prop('disabled', true)
   } else {
   $('div').append(product.name)
   }
 })
})

name, price, soldOut 세 가지 프로퍼티를 가진 product 객체를 생성했습니다. soldOut이 false이면 <div>에 상품명이 표시됩니다. "Add to Cart" 버튼을 클릭해 어떤 일이 일어나는지 확인해 보겠습니다.

soldOut 프로퍼티가 false로 설정되어 있으므로 <div>에 상품이 정상적으로 표시되었습니다. 그렇다면 이 자켓이 재고 마지막 한 벌이라면 어떻게 될까요? soldOut 값을 true로 변경해 보겠습니다.

const product = {
name: 'Jacket',
price: 50.00,
soldOut: true
}

이제 "Add to Cart" 버튼이 비활성화될 것으로 예상됩니다.

바로 우리가 원하던 결과입니다. 콜백 함수 안의 조건문을 통해 품절 상품의 "장바구니 담기" 버튼을 성공적으로 비활성화했습니다. 이제 사용자는 품절된 상품을 장바구니에 담을 수 없으며, 쇼핑몰 앱에서 발생할 수 있는 큰 골칫거리를 미리 예방한 셈입니다.

마무리

jQuery로 HTML 버튼을 비활성화하는 방법을 학습하면서, jQuery에는 이를 위한 전용 메서드가 없다는 사실을 확인했습니다. 이를 해결하기 위해 prop() 메서드로 버튼의 "disabled" 프로퍼티를 true로 설정했고, 실제 쇼핑몰 예제를 통해 버튼 비활성화가 유용하게 활용되는 모습도 살펴봤습니다.

웹 개발에서 사용자 경험(UX)을 안내하는 것은 매우 중요합니다. 이 가이드에서는 버튼 비활성화를 통해 사용자 경험을 자연스럽게 유도하는 방법을 다뤘습니다. 다음 프로젝트에서도 버튼 비활성화가 사용자 경험 개선에 어떻게 기여할 수 있을지 적극적으로 고민해 보시기 바랍니다.