본문 바로가기
개발/javascript

jquery button disable 속성 지정 및 setTimeout 으로 중복클릭방지 컨트롤

by 황태고블린 2022. 7. 13.
<button type="button" id="testButton1">disabledButton</button>
<br/>
<br/>
<button type="button" id="testButton2">openButton</button>
<br/>
<br/>
<button type="button" id="testButton3">timerButton</button>

jquery 로 버튼 disabled 을 컨트롤 하는 방법입니다. attr 로 속성 disabled 를 true나 fals로 설정해서 버튼을 죽이고 살리고 할 수 있습니다.

// button disabled
$("#testButton1").click(function (){
	$("#testButton1").attr("disabled",true);
});

// disabled된 버튼을 되살림
$("#testButton2").click(function (){
	$("#testButton1").attr("disabled",false);
});

// 클릭후 disabled 처리되지만 1초후 다시 살아남
$("#testButton3").click(function (){
	$("#testButton3").attr("disabled",true);
    setTimeout(function () {
    	$("#testButton3").attr("disabled",false);
    }, 1000)
});

testButton3 예처럼 setTimeout을 이용해서 일시적으로 클릭을 못하게 만들었다가 다시 살릴 수 도 있습니다. 

 

 

JSFiddle로 만들어본 예제

 

jQuery toggleClass example - JSFiddle - Code Playground

 

jsfiddle.net

 

댓글