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

Question

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

<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

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

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>

EDIT: как вы можете видеть в приведенном выше фрагменте кода, ваш код работает прекрасно. Именно так вы можете использовать такой if-statement, так хорошо работать!

Теперь, если она по-прежнему не работает для вас, убедитесь, что вы

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

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

Answer 2

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

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); 
     } 
    }); 
}); 

Answer 3

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

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