[Js/jQuery] 이메일 셀렉트박스 선택 시 input disabled

/**

 *     Browser :: IE9+, Chrome, Safari, Firefox, Opera

 *     Desc :: Email input box

 **/

HTML

<div>
    <input name="email1" type="text"> @ <input name="email2" type="text">
    <select name="select_email" onChange="selectEmail(this)">
        <option value="" selected>선택하세요</option>
        <option value="naver.com">naver.com</option>
        <option value="gmail.com">gmail.com</option>
        <option value="hanmail.com">hanmail.com</option>
        <option value="1">직접입력</option>
    </select>
</div>

jQuery

function selectEmail(ele){
    var $ele = $(ele);
    var $email2 = $('input[name=email2]');

    // '1'인 경우 직접입력
    if($ele.val() == "1"){
        $email2.attr('readonly', false);
        $email2.val('');
    } else {
        $email2.attr('readonly', true);
        $email2.val($ele.val());
    }
}

CSS

input{width:150px; padding:5px; border:1px solid #dedede}
input:read-only{background-color:#dedede}                      /* read-only style */
select{padding:7px; vertical-align:middle}

Result

@ 선택하세요 naver.com gmail.com hanmail.com 직접입력

/**

 *    궁금한 점은 댓글로 남겨주세요.

 *   Please fell free to ask me any questions.

 **/