JQuery jsp 라디오 버튼 클릭시 input text창 활성화/비활성화

 

<label><input type="radio" name="group" value="Y" style="margin-right: 3px;" />예</label>

<label><input type="radio" name="group" value="N" style="margin-right: 3px;"/>아니오</label>

 

 <div id ="etc_view" >

        <span>테스트 </span>

        <input type="text" id="contents" name="contents" size="40" title="내용입력" class="txt" />

</div>

 

 

 

 

 아니오 버튼 누르면 텍스트창이 비활성화 되면서 색상이 회색으로 변하게 하기 (예 누르면 다시 돌아옴)

<script>

 

$(document).ready(function() {

           $('input[type="radio"][name="group"]').on('click', function() {

            var chkValue = $('input[type=radio][name="group"]:checked').val();

                      if (chkValue === 'Y') {

                                  $("#consult").prop("disabled",false);

                                  $("#consult").css("background","#ffffff");

                         

                         } else{

                                  $("#consult").prop("disabled",true);

                                  $('#consult').css("background-color","#f7f7f7");

                                  $('#consult').val('');

 

          } });

});

</script>

결과 

예 누르면 다시 활성화 

 

---

 

 

아니오 버튼 클릭시 텍스트창 사라지게 하기 

 

<label><input type="radio" name="group" value="Y" style="margin-right: 3px;" />예</label>

<label><input type="radio" name="group" value="N" style="margin-right: 3px;"/>아니오</label>

 

 <div id ="etc_view" style ="display:none;" >

        <span>테스트 </span>

        <input type="text" id="contents" name="contents" size="40" title="내용입력" class="txt" />

</div>

 

 

 

<script>

 

$(document).ready(function() {

          $('input[type="radio"][name="group"]').on('click', function() {

            var chkValue = $('input[type=radio][name="group"]:checked').val();

                if (chkValue === 'Y') {

                       $('#etc_view').css('display', 'block');

                 } else{

                       $('#etc_view').css('display', 'none');

                       $('#consult').val('');

} });

});

</script>

 

결과 

예 누르면 다시 인풋창 나타남