Button disabilitation based on class + data-attribute

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

The structure of each group is:

  • Clicking submit button of an HTML form by a Javascript code
  • Can I make a <button> not submit a form?
  • Load an HTML file via a button using jQuery
  • How to access the value of a radio button that is checked using YUI?
  • Button that refresh page on click
  • How do I implement press and hold button javascript?
    • 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>

  • show form value in alert after click on button
  • document.write - Where's my content?
  • radio button checked javascript - no jquery
  • Write text inside a div from JavaScript?
  • Can I make a <button> not submit a form?
  • JavaScript: disable <button> until value is selected
  • One Solution collect form web for “Button disabilitation based on class + data-attribute”

    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>