Кнопка Отключить, если количество данных меньше 1

Question

Я хочу отключить следующую кнопку, если атрибут "количество данных" меньше 1. Я не могу понять, как правильно сформировать оператор if для этого.

<button type="submit" data-product_id="1" data-product_sku="test" data-quantity="0" class="add_to_cart_button button product_type_simple">Add to cart</button>

Я пробовал что-то вроде этого:

var cart_button = $('.add_to_cart_button');
if(cart_button.attr("data-quantity") < 1) {
    cart_button.prop("disabled", true);
}

Answer 1

JQuery имеет встроенную возможность читать (и устанавливать при необходимости) теги данных. Использовать .data() синтаксис Обратите внимание, что вы удаляете префикс "data-" при использовании этого свойства. Кроме того, убедитесь, что вы завернули все в document.ready функция.

$(function(){
    var cart_button = $('.add_to_cart_button');
    if(cart_button.data("quantity") < 1) {
        cart_button.prop("disabled", true);
    }
});

Answer 2

Ваш код работает нормально! Смотрите рабочий пример ниже.

var cart_button = $('.add_to_cart_button');
if(cart_button.attr("data-quantity") < 1) {
    cart_button.prop("disabled", true);
}

// Ignore code below this line, it's just for the demo

$('.set_to_1').click(function() {
  cart_button.attr("data-quantity", 1);
  if(cart_button.attr("data-quantity") < 1) {
    cart_button.prop("disabled", true);
  } else {
    cart_button.prop("disabled", false);
  }
});
$('.set_to_0').click(function() {
  cart_button.attr("data-quantity", 0);
  if(cart_button.attr("data-quantity") < 1) {
    cart_button.prop("disabled", true);
  } else {
    cart_button.prop("disabled", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" data-product_id="1" data-product_sku="test" data-quantity="0" class="add_to_cart_button button product_type_simple">Add to cart</button><br><br>

<!-- Ignore code below this line, it's just for the demo -->

<button class="set_to_1">Set data-quantity to 1</button> <button class="set_to_0">Set data-quantity to 0</button>

РЕДАКТИРОВАТЬ: как вы можете видеть в фрагменте выше, ваш код работает отлично. Это именно то, как вы можете использовать такое выражение if, так что хорошая работа!

Теперь, если это все еще не работает для вас, убедитесь, что у вас есть

1. jQuery инициализируется в вашем заголовке
2. Обернул код в $(document).ready( function() { ваш код });

Если, тем не менее, он все еще не работает, вы должны открыть консоль и обновить страницу, а затем опубликовать любые ошибки, которые появляются здесь. Возможно, какая-то другая часть вашего javascript (здесь не показана) нарушает ваш код.

Answer 3

Ваш код работает нормально для меня;

jsfiddle: https://jsfiddle.net/y4jqp2vb/10/

$(function(){

    var cart_button = $('.add_to_cart_button');
    if(cart_button.attr("data-quantity") < 1) {
        cart_button.prop("disabled", true);
    }
});

обновил код для дополнительного вопроса, см. ту же скрипку:

 $(function(){

    var cart_button = $('.add_to_cart_button');
    $('.add_to_cart_button').each(function(){
            if( $(this).attr("data-quantity") < 1) {
        $(this).prop("disabled", true);
        }
    });
});