如果一个特定的元素ID出现在页面上，通过JS禁用按钮

Question

我试图使用JS更改添加到购物车按钮被禁用，如果我们的库存水平(显示在<span>的前端)是"缺货"。这个JS已经在我们的网站上设置了，用于改变变体的按钮行为(在帖子底部的代码)，所以如果我可以使用我们的库存<span>集成一个额外的条件规则，那将是惊人的。

当缺货消息出现时的HTML:

<span class="LocationNoStock">Currently Sold Out</span>

老实说，我对JS几乎没有任何经验，所以我所知道的是，我可以通过类名查找元素:

(document.getElementsByClassName("LocationNoStock")

基本上我想添加这样的逻辑:

if class 'LocationNoStock' exists then disable 'add-to-cart' button

如果能提供任何帮助，我将不胜感激!如果有帮助的话，我们当前用于修改添加到购物车按钮的JS如下-如果可以插入一个额外的规则来搜索<span>并模仿其行为，那将是惊人的!

updateCartButton: function(evt) {
var variant = evt.variant;
if (variant) {
if (variant.available) {
// Available, enable the submit button and change text
$(selectors.addToCart, this.$container).removeClass(classes.disabled).prop('disabled', false);
$(selectors.addToCartText, this.$container).html(theme.strings.addToCart);
} else {
// Sold out, disable the submit button and change text
$(selectors.addToCart, this.$container).addClass(classes.disabled).prop('disabled', true);
$(selectors.addToCartText, this.$container).html(theme.strings.soldOut);
}
} else {
// The variant doesn't exist, disable submit button
$(selectors.addToCart, this.$container).addClass(classes.disabled).prop('disabled', true);
$(selectors.addToCartText, this.$container).html(theme.strings.unavailable);
}
},

Answer 1

你使用jquery$(...)，所以你可以做以下事情，寻找.LocationNoStock，如果它被发现，然后禁用.add-to-cart按钮。

if ($('.LocationNoStock').length) $('.add-to-cart').attr('disabled', 'disabled')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="LocationNoStock">Currently Sold Out</span>
<button type="button" class="add-to-cart">Add to Cart</button>

Answer 2

要在加载时禁用javascript中的按钮，可以通过设置元素的属性来完成例子:setAttribute("style","颜色:red")在你的情况下，你正在获取元素使用类"add-to-cart"它提供了htmlcollection，所以使用索引你可以访问按钮元素，然后使用javascript的setAttribute函数，可以设置特定的属性。

试试这个:

$(document).ready(function(){
if (document.getElementsByClassName("LocationNoStock") != null){
var element = document.getElementsByClassName("add-to-cart");

element[0].setAttribute("disabled", ""); 
}
});