How to disable and enable a tag click-CodePudding

On clicking the "minus" span the value in "count" input decreases, but it should stop decreasing when it reaches 0. So I disable "minus" span but it remains disabled when value is positive again.

        $(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);
 }
});

  .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：

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);
});

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);
    }
});

or you can avoid using .prop():

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

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