[javascript] 라디오버튼(radio button)에 Readonly 처리 방법

 

수정화면을 개발시 읽을 수만 있고 변경을 못 하도록 할때 일반적으로

<input type="text" name="title" readonly>

 처리를 한다.

 

그런데 체크박스(check box)/라디오버튼(radio button)/콤보박스(select box)는 readonly 속성이 없다.

 

비슷한 기능을 하는것이 disabled ( 예:<select name="jobtype" disabled> ) 속성인데 이건 처리화면으로 값을 넘기지 못한다.

(값을 넘기려면 hidden에 따로 담아야 한다.)

 

이때 아래와 같이 사용하면 라디오버튼(radio button) 에서 Readonly 와 같은 동작을 하게 할 수 있다.

 

 

<script type="text/javascript">

//*************** 라디오 버튼용 시작 ***************//

function setRadioCl(e){ 

    var srcEl = getSrc(e);

    var ra = srcEl.form[srcEl.name]

    for(var i=0;i<ra.length;i++){

        if(ra[i].checked) ra[i].onpropertychange = function(e){getSrc(e).click()}

        else ra[i].onclick = function(){return false};

    }

}

function getSrc(e)

{

    return e? e.target || e.srcElement : event.srcElement;

}

//*************** 라디오 버튼용 끝   ***************//

//-->

</SCRIPT>



<form name="myform">

<input type=radio id=id1 name="zzz4" value="1" onfocus="setRadioCl(event)"> 1번

<input type=radio id=id2 name="zzz4" value="2" onfocus="setRadioCl(event)" checked> 2번

<input type=radio id=id3 name="zzz4" value="3" onfocus="setRadioCl(event)"> 3번

</form>

 

 

출처 : http://cafe.naver.com/zalhe/178