상세 컨텐츠

본문 제목

[ jQuery ] Button 의 disabled 속성 없애기 / 버튼 활성화 하는 방법

FrontEnd/jQuery

by SangHoonE 2022. 5. 25. 09:00

본문

반응형

안녕하세요 상훈입니다. 

요즘 jquery를 무척 많이 접하게 되어 저도 하나씩 모르는 것들을 알아가고 있습니다.

예를 들어... show(), hide()..? ㅋㅋㅋㅋ

 


 

제이쿼리를 이용하여 특정 버튼을 활성화 / 비활성화 하는 방법에 대해 포스팅하겠습니다.

<button type="button" id="myButton" onclick="change()" disabled>  click  </button>

위와 같이 id : myButton,  onclick: change() 라는 메서드를 실행하고 비활성화 된 click 버튼이 있습니다.

그럴 때에 제이쿼리로 해당 버튼의 활성화 비활성화 상태를 변경하고 싶은데요,

 

attr() 을 사용하는 방법, 그리고 prop()을 사용하는 방법이 있습니다.

 

1. attr()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').removeAttr('disabled');
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').removeAttr('disabled');
    } else {
    	$('#myButton').attr('disabled');
    }
}

이렇게 하는 방법이 있구요~

 

2. prop()

// 1. 온오프가 아니라 비활성만 제거하는 방법
function change() {
	$('#myButton').prop('disabled', false); // 비활성을 비활성 = -1 x -1 와 같음
}

// 2. 변수를 하나 할당하여 온오프로 관리하기
let status = true
function change() {
	if( status ) {
    	$('#myButton').prop('disabled', false);
    } else {
    	$('#myButton').prop('disabled', true);
    }
}

 

이렇게 사용하시면 됩니다. 

Prop() 을 사용하시는 것을 권장드립니다.

 

 

이상입니다. 

출처 :https://velog.io/@sy3783/jQuery1.-%EB%8D%94-%EC%9D%B4%EC%83%81-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0

 

관련글 더보기

댓글 영역