잡동사니에도 사랑을

[21.10.14] exam04(03_jQueryAttr) - 체크박스 활성화 / 비활성화, 파일 열기 본문

JAVA_EE/JQuery

[21.10.14] exam04(03_jQueryAttr) - 체크박스 활성화 / 비활성화, 파일 열기

luvforjunk 2021. 10. 14. 11:02
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/event.css">
</head>
<body>
<h1>활성/비활성 구현하기</h1>
<form name="form1">
   <input type="checkbox" id="upload_file_check" value="Y" />
   <input type="file" id="file_finder" disabled />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#upload_file_check').change(function(){
		var is_check = $(this).is(':checked');
		
		$('#file_finder').prop('disabled', !is_check);
		// disabled 자체가 비활성화니까 반대로(!)
	});
});
</script>
</body>
</html>

 

 

 

[결과]

 

 

 

파일 선택 버튼 클릭 시

728x90
반응형

'JAVA_EE > JQuery' 카테고리의 다른 글

[JQuery] CSS 적용 여부 확인(hasClass()), 클래스 적용 및 해제(addClass() / removeClass()), 적용 해제 반복처리(toggleClass())  (0) 2021.10.14
[21.10.14] exam05(03_jQueryAttr) - 이미지 위에 마우스 올려놨을 때 이미지 변경  (0) 2021.10.14
[21.10.14] exam03(03_jQueryAttr) - 전체 선택 기능 구현(attr / prop)  (0) 2021.10.14
[21.10.14] exam02(03_jQueryAttr) - 클릭 시 index 순으로 이미지 파일 변경  (0) 2021.10.14
[21.10.14] exam01(03_jQueryAttr) - attr과 prop의 차이  (0) 2021.10.14
'JAVA_EE/JQuery' Related Articles more