时间戳

首页 > 解决方案 > 如何禁用和启用标签点击

javascript - 如何禁用和启用标签点击

问题描述

单击“减”跨度时，“计数”输入中的值会减小，但当它达到 0 时应该会停止减小。所以我禁用了“减”跨度，但当值再次为正时它仍然禁用。

        $(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/bootstrap@5.1.1/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>

标签： javascripthtmljqueryperformanceif-statement

解决方案

问题是它else永远不会达到，因为当它为 0 时，它现在被禁用并且不会再次被点击。

尝试这个：

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

或者你可以避免使用 .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);
    }
});

推荐阅读