how to disable minus span tag only on value 0 for quantity using Jquery .. like IF qty span is 0 dis-CodePudding

so far i tried to achieve what i what by using

Prob();

but it doesn't work correctly . I don't maybe there's something wrong in my logic or my script code ..

what I did is when the value is equal to 0 then disable the span tag . so the user can't click the minus span tag . he can only click the plus span tag for quantity .. and everything is good till now ..

but the problem is once the minus span tag get disabled..

it cant turn back to enable anymore.. even the quantity is not 0, the span tag still disable

and I already use IF ELSE Statement but it seems the else statement it doesn't work..

can someone help on this ..

        $(document).on('click','.plus',function(){
            $(this).closest('.content').find('.count').val(parseInt($(this).closest('.content').find('.count').val())   1 );
        });
        $(document).on('click','.minus',function(){ $(this).closest('.content').find('.count').val(parseInt($(this).closest('.content').find('.count').val()) - 1 );
 if ($(this).closest('.content').find('.count').val() == 0) {
         $(this).closest('.content').find('.count').val(0);
         $(this).closest('.minus').prop('disabled', true);
 }else{
         $(this).closest('.minus').prop('disabled', false);
 }
});

.gallery{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0;
}
  .qty{
    padding-bottom: 15px;
  }
  .qty .count {
    border: 1px solid #e1ecfb;
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
    font-weight: 450;
    padding: 0 0;
    width: 35px;
    text-align: center;
}
.qty .plus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: white;
    background-color: #cee0f9;
    width: 25px;
    height: 25px;
    font: 25px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 30%;
    }
.qty .minus {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
    color: #ffffff;
    background-color: #cee0f9;
    width: 25px;
    height: 25px;
    font: 23px/1 Arial,sans-serif;
    text-align: center;
    border-radius: 30%;
    background-clip: padding-box;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
<title>Document</title>
</head>
<body>
 <div class="produk_list">
   <div class="container-fluid" style="padding-bottom:50px;">
                <div class="row data_produk" id="data_produk" style="text-align: center;">
                    <div class="col-6 gallery" value="1">
                        <div class="content">
                            <img src="https://awsimages.detik.net.id/community/media/visual/2021/04/06/sandwich-keju-tomat-dan-alpukat-1_43.jpeg?w=700&q=90" width="150" height="150">
                            <h6>Product Name</h6>
                            <h6>Product Price</h6>
                            <div class="qty" id="qty">
                            <span class=" btn-primary minus b-dark">-</span>
                                <input type="number" class="count" name="qty" value="1">
                                <span class="plus b-dark"> </span>
                            </div>
                            <button class="buy-1 btn-button" id="pesan"><i class="fas fa-cart-plus"></i></button>
                        </div>
                    </div>
                 </div>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </body>
</html>

CodePudding user response：

The problem is that else is never reached since when it's 0 it's now disabled and won't be clicked again.

Try this:

$(document).on('click','.plus',function(){
    let countField=$(this).siblings('.count');
    let iniVal=parseInt(countField.val());
    iniVal  ;
    countField.val(iniVal);
    $(this).siblings('.minus').prop('disabled', false);
});

$(document).on('click','.minus',function(){ 
    let countField=$(this).siblings('.count');
    let iniVal=parseInt(countField.val());
    iniVal--;
    countField.val(iniVal);
    if(iniVal===0){
        $(this).prop('disabled', true);
    }
});

CodePudding user response：

Try the below code it works fine.

$(document).on('click','.plus',function(){    
    var currVal = parseInt($('.count').val())   parseInt(1);
    $('.count').val(currVal);
    $('.minus').prop('disabled', false);
});
$(document).on('click','.minus',function(){
    var currVal = parseInt($('.count').val()) - parseInt(1);
    $('.minus').prop('disabled', false);
    if(currVal == 0){
      $('.minus').prop('disabled', true);
    }
    $('.count').val(currVal);
});