제목 : 활용예제 : 체크박스 클릭시 드롭다운리스트(콤보박스)의 상태 변경
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
// document.getElementById를 줄여서 $get으로 사용
$get = document.getElementById;
// 페이지 로드시 드롭다운리스트(Select)에 전체 항목 표시 및 기본값 설정
function Page_Load() {
$get("chkStatus").add(new Option("전체", "All"), 0);
$get("chkStatus").selectedIndex = 0;
}
// 체크박스 또는 레이블 클릭시 드롭다운리스트(콤보박스)의 상태 변경
function ChangeStatus() {
var varStatus = $get("chkDisabled").checked; // 체크박스의 체크된 상태 가져오기
if (varStatus == true) { // 체크가 되어있다면,
$get("chkStatus").disabled = true; // 상태 = disable
}
else {
$get("chkStatus").disabled = false;
}
}
</script>
</head>
<body onload="Page_Load();">
상태 :
<select id="chkStatue" name="chkStatus" onchange="alert(this.value);">
<option value="접수">접수</option>
<option value="처리완료">처리완료</option>
<option value="취소">취소</option>
</select>
<input type="checkbox" id="chkDisabled" onclick="ChangeStatus();" />
<label id="lblStatus" for="chkDisabled">상태변경</label>
</body>
</html>