我正在为电子商务购物车按-
和+
按钮编写<input type="number">
。基于类+数据属性的按钮不连续性
各组的结构是:
- 1X
<button class="minus" data-prod="prod_id_int">
- 1X
<input type="number" id="prod_id_int">
- 1X
<button class="plus" data-prod="prod_id_int">
我试图现在要做的是禁用按钮-
如果输入类型编号的值是< 1
。
要实现它,基于我的脚本,我必须禁用不是一般的<button class="minus">
,但具体的<button class="minus" data-prod="prod_id_int">
。 我想这
$(buttonClass).data('prod', dataProd).prop('disabled', true);
,它实际上阻止了数量被< 1
,但它并没有真正的产权disabled
添加到按钮。那么,我不确定这是否正确。有人能解释我如何实现它吗?
这里的工作片断
$(document).ready(function() {
$('button').on('click', function() {
var buttonClass = $(this).attr('class');
//console.log(buttonClass);
var buttonID = $(this).attr('id');
//console.log(buttonID);
var dataProd = $(this).data('prod');
var inputToChange = $('#' + dataProd);
var inputToChangeValue = $('#' + dataProd).val();
if (buttonClass == 'minus') {
var newValue = parseInt(inputToChangeValue) - parseInt(1);
if (newValue < 1) {
$(buttonClass).data('prod', dataProd).prop('disabled', true);
//$(buttonClass).data('prod="' + dataProd + '"').prop('disabled', true);
//$(buttonClass + '.[data-prod="' + dataProd + '"]').attr(disabled=disabled); //.prop('disabled', true)
//alert('NOPE');
} else {
$('#' + dataProd).val(newValue);
//console.log(inputToChangeValue);
}
} else if (buttonClass == 'plus') {
var newValue = parseInt(inputToChangeValue) + parseInt(1);
if (newValue > 99) {
alert('NOPPPPEE');
} else {
$('#' + dataProd).val(newValue);
console.log(inputToChangeValue);
}
}
});
});
.plus,
.minus {
width: 1.5%;
height: auto;
background-color: #EF1B1F;
border-radius: 50%;
text-align: center;
display: inline-block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="minus" data-prod="23">-</button>
<input type="number" class="qta" id="23" value="5">
<button class="plus" data-prod="23">+</button>
<br>
<button class="minus" data-prod="90">-</button>
<input type="number" class="qta" id="90" value="62">
<button class="plus" data-prod="90">+</button>
'$(buttonClass).prop( '已禁用',NEWVALUE (1);'try'inputToChangeValue - ' – mplungjan
这个按钮会被禁用吗?,因为'prop('disabled',true)'是这样做的方式 – Musa
@mplungjan感谢'--'提示,尽管如果把它放在var前面,Alexandru-Ionut Mihai强调的不是结尾。我实际上无法得到这个'$(buttonClass).prop('disabled',newValue <1);' – Brigo