[제이쿼리] 라디오(Radio) 버튼 클릭하면 input 활성 / 비활성화하기

jQuery로 HTML Radio 버튼을 클릭 이벤트가 발생했을 때, input 태그를 활성화 / 비활성화 하는 방법입니다.

설명을 위해 아래에 예와 아니오 옆에 좋아하는 과일의 종류를 입력하는 input 태그가 있는 HTML 소스를 예제로 사용하겠습니다.

<form action="./example.html">
    <label>과일을 좋아하시나요?</label><br />
    <input type="radio" class="radio-value" name="fruits" value="yes" /> 예

    <input type="radio" class="radio-value" name="fruits" value="no" /> 아니오

    <input type="text" class="radio-value-detail" placeholder="과일의 종류를 입력해주세요." value="" />
</form>

1. 선택된 Radio 값 가져오기

우선, Radio 버튼이 클릭되었을 때 :checked 선택자를 이용하여 체크된 Radio 버튼의 값을 가져옵니다.

$('.radio-value').on('click', function() {
    var valueCheck = $('.radio-value:checked').val(); // 체크된 Radio 버튼의 값을 가져옵니다.
});

2. input 활성화 / 비활성화

attr('disabled', false)를 이용하여, 체크된 Radio 버튼이 예 일 때는 텍스트를 입력할 수 있는 input 을 활성화하고 아니오 일 때는 비활성화할 수 있습니다.

$('.radio-value').on('click', function() {

    var valueCheck = $('.radio-value:checked').val(); // 체크된 Radio 버튼의 값을 가져옵니다.

    if ( valueCheck == 'yes' ) {
        $('.radio-value-detail').attr('disabled', false); // 과일 종류를 입력하는 input 을 활성화합니다.
        $('.radio-value-detail').focus(); // 과일 종류를 입력하는 input 에 커서를 이동시킵니다.
    } else {
        $('.radio-value-detail').val(''); // 입력된 과일 종류 값이 있으면, 초기화합니다.
        $('.radio-value-detail').attr('disabled', true); // 과일 종류를 입력하는 input 을 비활성화합니다.
    }
});