테스트 사이트 - 개발 중인 베타 버전입니다

라디오 선택에 따른 수량증감 관련한 질문 입니다.

하와이안펀치 5년 전 조회 2,501

안녕하세요.

아래의 소스와 같이 라디오로 아이템 선택시 그 옆에 해당 아이템의 수량을 증가 및 감소하게 하여 수량이 출력되게 까지는 겨우 되어있는 상태 입니다.

 

</p>

<p><script>

// 증감 스크립트

$(function(){

    $('div#btn_add77').on('click', function(){

        $('#number').text(parseInt($('#number').text()) + 1);

    });

    $('div#btn_mins77').on('click', function(){

        $('#number').text(parseInt($('#number').text()) - 1);

    });

});

</script></p>

<p> </p>

<p><!-- 라디오 선택 -->

  <div class="icheck-material-orange" style="display:none;">

      <input type="radio" id="ex77id1" name="ex77" value="" <?php echo ($write['ex77'] == "") ? " checked" : "";?> />

      <label for="ex77id1">아이템명</label></div>

<!-- 위의 라디오 버튼은 display:none --></p>

<p>  <div class="icheck-material-orange">

      <input type="radio" id="ex77id2" name="ex77" value="아이템명" <?php echo ($write['ex77'] == "아이템명") ? " checked" : "";?> />

      <label for="ex77id2">아이템명</label></div></p>

<p>

<!-- 증감 버튼 및 값  --></p>

<p><div>

            <div id="btn_add77" ><a href="#">+증가</a></div>

            <div id="btn_mins77"><a href="#">-감소</a></div>

            <div id="number">1</div></p>

<p></div></p>

<p>

 

여기에서

## 라디오 아이템이 미선택 상태인 경우 "증감버튼 및 값"이 disable 이 되게 하기와

## 수량증감한 값을 ex78에 value값을 저장하기, 

## 마지막으로 수량 증감을 누르면 0 이하로는 안내려가기

 

조언을 구하고자 합니다...

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

서잰션
5년 전

</p>

<p><script>

// 증감 스크립트

$(function(){

    $('#ex77id2').on('click', function(){

        $('.aa').attr("disabled","false");

        $('div#btn_add77').on('click', function(){

            $('#number').text(parseInt($('#number').text()) + 1);

        });

        $('div#btn_mins77').on('click', function(){

            $('#number').text(parseInt($('#number').text()) - 1);

            if($('#number').text()<0) {

                alert("잘못된 수입니다");

                $('#number').text(1);

            }

        });

    });

});</p>

<p></script>

<script></p>

<p></script>  

  

<!-- 위의 라디오 버튼은 display:none -->

  <div class="icheck-material-orange">

      <input type="radio" id="ex77id2" name="ex77" value="아이템명" <?php echo ($write['ex77'] == "아이템명") ? " checked" : "";?>  />

      <label for="ex77id2">아이템명</label></div>

         

<!-- 증감 버튼 및 값  -->

<div>

            <div id="btn_add77" ><a href="#" disabled='disabled' class="aa">+증가</a></div>

            <div id="btn_mins77"><a href="#" disabled='disabled'class="aa">-감소</a></div>

            <div id="number">1</div>

</div></p>

<p> </p>

<p>

 

##1 맨처음에는 disabled로 감싸였고 그 상태에서 라디오 버튼을 누르면 disabled를 풀게끔 만들었습니다.

##2 number값이 저장하는걸로 알고있고 어떤것을 의도하는지 잘 몰라서 따로 하진 않았습니다

##3 감소할 때 , 0값이하로 내려가면 alert창 띄우고 1값으로 고정시키게 만들었습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

하와이안펀치
5년 전
답변 감사드립니다~
위의 소스로 테스트 해보니 왜 그런지 아무것도 안되네요.. ;;;
라디오 미선택 상태에서도 증감 버튼이 보이고
증감 버튼을 눌러도 number가 증감되지 않고 그냥 해당 페이지(write.skin.php)의 최상단으로 화면이 올라갑니다..
어쨌든 조언해 주신 소스를 참고삼아 디비 파보겠습니다.
감사합니다~~^^
서잰션
5년 전
단순히 disable시킨다고 하시길래 기능적으로(버튼을 눌러도 증가감이 안되도록)만 고려를 했었네요 만약 안보이게 했다가 보이게 만드실려면
[code]
html부분
<div id="btn_add77" ><a href="#" disabled='disabled' class="aa">+증가</a></div>
->
<div id="btn_add77" style="display:none"><a href="#" class="aa">+증가</a></div>

$('.aa').attr("disabled","false");
->
$('#btn_add77').css("display","");

이렇게 바꿔주시면 될거같아요
하와이안펀치
5년 전
여러모로 신경 써주신 답변 감사드립니다.. 그런데... 안됩니당... ;;;;
수정된 소스로 적용해보면
# 라디오 클릭전 : 숫자1이 나와 있음 (사실 숫자도 라디오 클릭시 보이게 하려는..)
# 라디오 클릭후 : 증가버튼만 나타남
# 라디오 클릭 해제후 : 증가버튼 및 증가시켰던 숫자가 그대로 남아 있음 (disable 적용 안됨)

해주신 조언 바탕으로 다시 소스를 줍줍해 보겠습니다.
감사합니다^^;;

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인