[JQuery]라디오버튼 선택시 텍스트박스 활성화/비활성화

라디오버튼 선택시 텍스트박스 활성화/비활성화

라디오버튼 활성화 선택 시 텍스트박스 활성화 / 비활성화 선택 시 텍스트박스 비활성화

라디오버튼 클릭 시 이벤트가 발생하도록 한다.

클릭한 라디오버튼의 value 값을 받아와 비교 후 텍스트박스의 속성을 변경한다.

1. HTML

<div style="width:200px;">
  <input type="radio" name="radio" id="r1" value="1" checked><label for="r1">활성화</label>
  <input type="radio" name="radio" id="r2" value="0"><label for="r2">비활성화</label>
</div>
<div style="width:200px;">
  <input type="text" name="text">
</div>

2. JQuery

$(document).ready(function(){
 
    // 라디오버튼 클릭시 이벤트 발생
    $("input:radio[name=radio]").click(function(){
 
        if($("input[name=radio]:checked").val() == "1"){
            $("input:text[name=text]").attr("disabled",false);
            // radio 버튼의 value 값이 1이라면 활성화
 
        }else if($("input[name=radio]:checked").val() == "0"){
              $("input:text[name=text]").attr("disabled",true);
            // radio 버튼의 value 값이 0이라면 비활성화
        }
    });
});

※ 결과

See the Pen Jwarmp by HanSeungHwa (@hanseunghwa) on CodePen.