基于class + data-attribute的按钮调度

Question

I'm writing an <input type="number"> with - and + button for an ecommerce cart.

The structure of each group is:

• 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">

What I'm trying to do now is disabling the button - if the value of the input type number is < 1 .

To achieve it, based on my script, I have to disable not the general <button class="minus"> but the specific <button class="minus" data-prod="prod_id_int"> . I tried this

$(buttonClass).data('prod', dataProd).prop('disabled', true);

and it actually prevents the quantity from being < 1 BUT it doesn't really add the property disabled to the button. I'm not sure, then, that it's the right way. Can someone explain me how to achieve it?

Here the working snippet

 $(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> 

Answer 1

Here is solution.

$('.'+buttonClass).data('prod', dataProd).prop('disabled', true);

All you need is to concatenate . symbol to your class.

buttonClass returns only the className , such as minus and you need jquery selector , like this: $('.minus')

Also, I recommend you to use this: var newValue = --inputToChangeValue; for a simply way to decrement value, instead var newValue = parseInt(inputToChangeValue) - parseInt(1);

 $(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 = --inputToChangeValue; if (newValue < 1) { $('.'+buttonClass).filter(function() { return $(this).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); $('.minus').filter(function() { return $(this).data("prod") == dataProd }).prop('disabled', false); if (newValue > 99) { alert('NOPPPPEE'); } else { $('#' + dataProd).val(newValue); console.log(inputToChangeValue); } } }); }); 

 .plus, .minus { width: 10%; 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="12"> <button class="plus" data-prod="90">+</button>