如何使用 Jquery 仅在值为 0 的数量上禁用负跨度标记 .. 就像 IF qty span 为 0 disable ELSE qty span enable
[英]how to disable minus span tag only on value 0 for quantity using Jquery .. like IF qty span is 0 disable ELSE qty span enable
问题描述
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 .我所做的是当值等于 0 然后禁用 span 标记。 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它不能再返回启用了..即使数量不为0，span标签仍然禁用
and I already use IF ELSE Statement but it seems the else statement it doesn't work..我已经使用了 IF ELSE 语句，但似乎 else 语句不起作用..
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/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>
2 个解决方案
解决方案1
0 2021-10-19 07:11:32
The problem is that else is never reached since when it's 0 it's now disabled and won't be clicked again.问题是else永远不会到达，因为当它为 0 时，它现在被禁用并且不会再次被点击。
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);
}
});
解决方案2
0 2021-10-19 11:20:18
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);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.