Kudos
Collect
Twiiter
Facebook
Share
개발의 'ㄱ'자라도 아는 날을 기대하며...

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

Last updated over 4 years ago
1 0 0 0

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 을 비활성화합니다.
    }
});

안녕하세요?^^ 개발자라는 소리를 듣고 싶어 늦은 나이에 개발의 세계에 몸담게 된 Brad 라고 합니다. 아직 개발의 'ㄱ' 자도 모르지만, 개발을 배우면서 알게되는 것들을 림프에 정리해보려고 합니다. 저의 부족한 글이 누군가에게 조금이나마 도움이 되길 바랍니다.

Essedrop - Make your file online instantly
 

Responses

Leave a response to @brad

Please sign in to comment.
Markdown is also available in comment.