반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Life goes slowly...

[Javascript] 자바스크립트의 버튼(button)에 disabled 속성 활용 본문

프로그래밍/Javascript

[Javascript] 자바스크립트의 버튼(button)에 disabled 속성 활용

빨강소 2021. 3. 5. 15:52
728x90
반응형

자바스크립트(Javascript)에서 버튼(Button) 영역에 disabled 속성을 추가 및 삭제하여 버튼을 클릭하거나 클릭을 하지 못하도록 활용을 해보도록 하겠습니다.

 

<html>
<head>
	<title>안녕하세요</title>
</head>
<body>
    <div>
    	<input type="submit" id="button_id" value="버튼" disabled="">
    </div>
</body>
</html>

 

자바스크립트의 disabled 속성 활용하기

 

<script type="text/javascript">
	var button_test = document.getElementById('button_id');
    
    //Button에 disabled 처리
    button_test.disabled = true;
    
    //Button에 disabled 처리해제
    button_test.disabled = false;    

</script>

 

Jquery로 disabled 속성 활용하기 

자바스크립트(Javascript)뿐만 아니라 제이쿼리(JQuery)에서도 활용이 가능합니다.

제이쿼리(JQuery)의 attr 함수를 사용하여 disabled 속성을 활용할 수 있습니다.

<script type="text/javascript">

    //Button에 disabled 처리해제
    $("#button_id").attr("disabled", flase);
    
    //Button에 disabled 처리
    $("#button_id").attr("disabled", true);	
    
</script>

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'프로그래밍 > Javascript' 카테고리의 다른 글

[Javascript] 자바스크립트(JS)의 객체정렬함수 - sort(), reverse()  (0) 2021.03.16
[Javascript] 자바스크립트(JS)의 HTML 내용을 엑셀 다운로드하기  (0) 2021.03.15
[jQuery] 제이쿼리(jquery)로 Cookie 관리하기  (0) 2021.03.12
[jQuery] 제이쿼리(jquery)의 radio button 확인  (0) 2021.03.10
[Javascript] innerText와 innerHTML 차이점  (0) 2021.03.03
[Javascript] 자바스크립트 이메일 유효성 검사(정규식 표현)  (0) 2021.02.27
[jQuery] 제이쿼리(jquery) selectbox의 이벤트  (0) 2021.02.26
[jQuery] checkbox 의 리스트 중 체크된 값 가져오기  (2) 2021.02.25
'프로그래밍/Javascript' Related Articles more
Comments