프론트엔드 | 2022. 5. 2. 09:10

JQuery - 체크박스 선택시 input 활성화 및 포커스 주기

폼 객체를 한줄씩 쭉 나열되어 있고, 체크박스가 맨 앞에 있어서 체크를 하면 해당 줄이 활성화 되도록 하는 것 많이 정답들이 나와 있지만, 간단하게 구현한 결과를 저장

 

    $("input:checkbox").on('click', function() { 
        var target_input_name = "#" + $(this).val() + "_quantity"
        if ( $(this).prop('checked') ) { 
            console.log($(this).val())
            $(target_input_name).prop("disabled", false);
            $(target_input_name).focus();
        } else {
            $(target_input_name).prop("disabled", true);
            $(target_input_name).blur();
        } 
    });

 

체크박스 클릭 이벤트에서 

타겟 이름을 머 가져오고 난 다음, (여기서는 "체크박스값_quantity" 라는 이름의 input form 이 있다는 가정임)

체크박스가 checked 인지 아닌지 보고 

활성화 focus 등등을 주면 된다는

 

참고페이지

https://lynmp.com/ko/article/tg1c704a401l

 

[jQuery제이쿼리] input 박스에 커서 이동시키기, focus() - LYNMP

홈페이가 열렸을 때, input 박스에 커서를 깜빡이게 하고 싶어서 찾아본 김에 정리합니다. 제이쿼리로 커서 강제 이동은 focus()를 이용합니다. focus 해제는 `blur()`를 사용합니다.

lynmp.com

https://cocosoft.kr/397

 

[jQuery]html 체크박스 체크시 이벤트 동작 발생

예전에도 input type="checkbox" 의 이벤트 실행해 대해서 포스팅 한 적 있습니다. 개인적으로 체크박스로 만들어 진 것은 제어하기가 편해서 많이 사용 하는 것 같네요. 오늘은 간단하게 체크박스 클

cocosoft.kr

끝.

 

포커스하세요

Jonas Svidras 님의 사진, 출처: Pexels

댓글을 달아 주세요

TistoryWhaleSkin3.4">