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

Question

如果我们的库存水平（显示在 <span> 的前端）“缺货”，我正在尝试使用 JS 将添加到购物车按钮更改为禁用。这个 JS 已经在我们的网站上设置，用于更改变体的按钮行为（post 底部的代码），所以如果我可以使用我们的清单 <span> 集成一个额外的条件规则，那将是惊人的.

这是 HTML 出现缺货消息时的提示：

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

老实说，我对 JS 的经验几乎为零，所以我所知道的是我可以通过 class 名称查找元素：

(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

要在加载时禁用按钮 javascript，可以通过设置元素的属性来完成例子： setAttribute("样式","颜色:红色") 在您的情况下，您正在使用 class“添加到购物车”获取元素，它提供 htmlcollection，因此使用索引您可以访问按钮元素，然后使用 javascript 的 setAttribute 函数可以设置特定属性。

试试这个：

    $(document).ready(function(){
 if (document.getElementsByClassName("LocationNoStock") != null){
     var element = document.getElementsByClassName("add-to-cart");
     
    element[0].setAttribute("disabled", ""); 
    }
    });

Answer 2

您使用 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>

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

Disabling a button via JS if a specific element ID appears on page

javascript

button

disable