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

【问题标题】：Disabling a button via JS if a specific element ID appears on page如果页面上出现特定元素 ID，则通过 JS 禁用按钮
【发布时间】：2021-01-27 13:46:29
【问题描述】：

如果我们的库存水平（显示在前端的<span>）“缺货”，我正在尝试使用 JS 将添加到购物车按钮更改为禁用。这个 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);
}
},

【问题讨论】：

标签： javascript button disable

【解决方案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>

【讨论】：

【解决方案2】：

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

试试这个：

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

【讨论】：