[JS] radio 버튼클릭 이벤트 / 동적으로 제어하기

radio 버튼을 두개 만들어서, 
팝업이 떳을때 자동으로 한개의 radio 버튼이 select되어있고, 
선택되지 않은 radio 버튼의 옆엔 selectbox 가 disabled되어있어야 한다.

그러면 html 코드는

<div class="tabDiv">
    <dl class="w450">
        <dt class="w120"><input type="radio" name="host_chk" value="auto" checked>자동 선택</input></dt>
    </dl>
    <dl class="w450">
        <dt class="w120"><input type="radio" name="host_chk" value="select">직접 선택</input></dt>
        <dd class="w100"><select id="hostOption" disabled=true></select></dd>
    </dl>
</div>

이런식으로 하나의 radio 에는 checked가 있고
선택되지 않은 radio 버튼 옆의 selectbox는 disabled=true 가 되어있을 것이다.

이제 이것을 동적으로 클릭하면 checked 되었던 것이 바뀌고, selectbox가 보여지게 될것이다.

먼저 코드는

//radio 버튼 클릭 이벤트 
$("input:radio[name=host_chk]").click(function(){
            
    if($("input:radio[name=host_chk]:checked").val()=='select'){
        $("#hostOption").attr("disabled",false);
        $("#hostOption").removeClass("readonly");
    }else{
        $("#hostOption").attr("disabled",true);                    
        $("#hostOption").addClass("readonly");
    }
});

이렇게 된다.

두개의 radio 버튼의 이름을 동일하게 주고 value값을 다르게 주어 연관된 radio 버튼이 다른 value값으로 구분가능하게 해준다.
그래서 if / else 문으로 value에 따라 id값에 attr 로 속성을 주면 되는데, 

잘보면 addClass와 removeClass가 있다. 
html 에서 처음에 disabled=true를 주었는데 그럼 selectbox가 약간 어두워진다.
그런데 disabled를 false로 주면 선택은 가능하다 어두워진 selectbox가 다시 돌아오지 않는다.

왜그런가 F12를 키고 보았더니 disabled=true를 준 곳에 class=readonly가 먹어있었다.
그래서 removeClass를 해주어야 어두어진 selectbox가 돌아오게 되는 것이다.

기억하자 !