jQuery를 사용하여 버튼을 비활성화하는 방법

웹 애플리케이션에서 버튼을 비활성화하는 데는 여러 가지 이유가 있습니다. 사용자가 매진된 상품을 장바구니에 추가하는 것을 방지하거나 사용자가 작업을 수행한 후 버튼을 클릭하지 못하도록 하는 것이든 jQuery에는 버튼을 직접 비활성화하는 방법이 없습니다.

대신 prop()를 사용합니다. 메서드, 라이브러리에 새로 추가된 — jQuery 1.6에 나타남. 선택한 요소의 속성 값을 검색하는 솔루션으로 도입되었습니다. 이전에는 attr() 속성 값을 검색하는 메서드입니다.

속성 값을 가져오는 동시에 속성 값을 검색하는 것과 관련된 메서드를 사용하면 때때로 예측할 수 없는 결과가 발생했습니다. jQuery 1.6부터 prop() 이러한 격차를 해소하기 위한 방법이 도입되었다. 목적을 위해 prop()를 사용할 것입니다. "disabled"가 HTML 버튼 요소의 속성 값이기 때문에 버튼을 비활성화합니다.

att() 사용에 대해 자세히 알아보려면 대 prop() , 간략한 역사와 튜토리얼을 읽어보세요.

prop() jQuery 구문

이제 prop()를 사용하는 이유와 방법에 대해 살펴보았습니다. , 구문을 살펴볼 수 있습니다. prop() 는 또 다른 jQuery 메서드이며 이 메서드는 선택한 요소(이 경우에는 버튼)에서 호출됩니다. ID가 "btn"인 버튼을 비활성화하는 방법을 살펴보겠습니다.

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

이 HTML은 버튼을 렌더링합니다.

버튼이 렌더링 중입니다! 이제 jQuery prop()를 사용하여 "disabled"의 속성 값을 true로 설정할 수 있습니다. .

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

보시다시피 prop() 값을 문자열로 받아들이고 두 번째 인수에 부울 값을 설정합니다. 부울 값은 true 또는 false입니다. 다음은 부울을 사용하는 방법에 대해 자세히 설명하는 가이드입니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

"disabled" 속성을 true로 설정한 후 클릭할 수 없는 버튼을 렌더링합니다. 이제 구문을 이해했으므로 이것을 사용하는 이유와 시점을 살펴보겠습니다. 다음 섹션에서는 "sold out?" 속성이 있는 제품이 있는 전자 상거래 사이트를 살펴보겠습니다.

제이쿼리 prop()을 사용하여 버튼 비활성화

이 예에는 제품이 매진되면 "장바구니에 추가" 버튼을 비활성화하는 쇼핑 앱이 있습니다. 이 예제에서는 간단한 HTML 버튼을 렌더링하고 매진되지 않은 경우 항목을 추가하기 위해

를 렌더링합니다.

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

<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)
   }
 })
})

객체를 포함하는 product라는 변수를 만들었습니다. 개체에는 name, price 및 soldOut 속성이 있습니다. soldOut 속성이 false이면 재킷이

에 표시되어야 합니다. 장바구니에 추가를 클릭하고 어떤 일이 일어나는지 살펴보겠습니다.

soldOut 속성이 false로 설정되어 있으므로

에 제품을 표시했습니다. 그것이 재고가 있는 마지막 재킷이라면? soldOut 속성이 true로 설정되면 어떻게 되는지 봅시다.

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

이제 장바구니에 추가 버튼이 비활성화될 것으로 예상합니다.

그것이 바로 우리가 원했던 것입니다. 콜백 함수의 조건문을 사용하여 장바구니에 추가 버튼을 비활성화할 수 있었습니다. 이제 사용자는 품절된 상품을 장바구니에 추가할 수 없습니다. 우리는 전자상거래 앱에서 큰 골칫거리를 피했습니다!

결론

jQuery로 HTML 버튼을 비활성화하는 방법을 배우면서 jQuery에는 그렇게 하는 명시적 방법이 없다는 것을 발견했습니다. 이 문제를 해결하기 위해 prop()를 사용했습니다. 버튼 속성 "disabled"를 true로 설정하는 메서드입니다. 그런 다음 버튼 비활성화가 얼마나 유용한지에 대한 예를 보았습니다.

웹 개발에서 사용자 경험을 안내하는 것은 필수적입니다. 이 가이드에서는 비활성화 버튼을 사용하여 사용자 경험을 안내했습니다. 버튼을 비활성화하면 다음 프로젝트에서 사용자 경험을 지시하는 데 어떻게 도움이 되는지 알아보세요.