정말 욕나온다. 씨발진짜
google에서도 찾기 힘든데, 다음에서 겨우 찾음.
출처
http://blog.daum.net/janustop/172
[사담]
개인적으로 html/javascript/jap를 공부하다가...
"화면의 HTML요소를 비활성화시켜보자"라는 생각이 떠올랐습니다.
적당한 포스트를 만들려고 보니.....
이녀석이 포함될 카테고리가 HTML인지.. javaScript인지.. 결정을 하지 못했습니다.
일단 예제를 만들고 보니..
HTML부분은 단순하고.. javascript부분이 비중이 조금 높은듯 하여...
이곳에 올립니다.
예제는 다음과 같습니다.
2*2테이블을 만들었습니다.
첫번째 열에는 '처음부터 비활성화된 버튼"을 배치했습니다.
두번째 열에는 "버튼을 클릭했을때 비활성화된 버튼"을 배치했습니다.
그림으로 보면 아래와 같습니다.
첫번째 열의 두번째 줄에 배치된 버튼은 처음부터 작동하지 않습니다.
클릭할 수 없기 때문입니다.
두번재 열의 두번째 줄에 배치된 버튼은 작동합니다.
클릭할 수 있기 때문입니다.
하지만, 한번 클릭하면 페이지를 다시 로드하기 전에는 다시금 클릭할 수 없습니다.
소스는 다음과 같습니다.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>컨트롤을 비활성화시키자.</title>
<script type="text/javascript">
function setDisable(elementid) {
alert("\"" + elementid +"\"를 누르셨습니다.");
var el = document.getElementById(elementid);
//alert(el);
el.disabled = 'true';
}
</script>
</head>
<body>
<!-- BODY -->
<table border='1' cellspacing='0' cellpadding='0' >
<colgroup>
<col width='300px' />
<col width='300px' />
</colgroup>
<tr>
<th>
처음부터 비활성화시킨 것.
</th>
<th>
동적으로 비활성화시킬 것.
</th>
</tr>
<tr>
<th>
<input type='button' id='btn1' value='누르면작동합니다.' disabled='true' onclick="setDisable('btn1')"/>
</th>
<th>
<input type='button' id='btn2' value='누르면 작동합니다.' onclick="setDisable('btn2')" />
</th>
</tr>
</table>
</body>
</html>
소스에서 확인할 수 있는 것처럼..
첫번째 열의 버튼은 소스에서 [disabled="true"]라는 속성을 제어하고 있습니다.
하지만..
두번째 열의 버튼은 클릭했을 때, setDisable()라는 함수를 호출하고..
'btn2'라는 인자를 이용하여 해당 컨트롤을 구한다음, el.disabled='true'라는 javascript로 제어하고 있습니다.