select box 선택 시 input 값 비활성화

Web/Javascript

select box 선택 시 input 값 비활성화

selfstarter 2019. 7. 27. 18:00

select box 선택 시 input 값 비활성화

- input값 비활성화 시 disabled를 true 값으로 주면 된다

- 선택 된 select값을 찾으려면 change 이벤트 시 find("option:seleced")로 선택된 값을 찾으면 도니다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(function(){	
	$(document).on("change", "select[name=list]", function(){
		var value = $(this).find("option:selected").val();
		var inputText = $(this).closest('.selectBox').find('.inputText');
		var flag = false;
		if (value == 0) {
			flag = true;
			$(inputText).val('');
		}
		
		$(inputText).attr("disabled", flag);
	});

})
</script>
</head>
<body>
<div class="selectBox">
	<select name="list">
		<option value="0">없음</option>
		<option value="1">사과</option>
		<option value="2">귤</option>
	</select>
	<div>
	select 선택시 활성화
	<input type="text" class='inputText' disabled />
	</div>
</div>
</body>
</html>