达到时间限制时禁用按钮

Question

我希望在达到时间限制时禁用按钮。 目前，在我的网站上，产品设置了一个倒数计时器，以显示还有多少时间可以参加比赛。 一旦计时器达到0，我想禁用产品按钮。

我曾尝试对此执行 CSS ，但由于这两个属性位于单独的 div 中。 我不知道如何针对他们。

按钮 ID 为.button ，“比赛结束” ID 为.hasfinished

编辑：已完成比赛的 html 代码为：

<span class="has-finished">Competition Finished</span>

我曾尝试使用以下代码定位按钮：

.has-finished > .button { style="color:#777;background-color:#aaa;cursor:not-allowed;" } 

这没有用，所以我然后尝试这样做：

.has-finished ~ .button { style="color:#777;background-color:#aaa;cursor:not-allowed;"}

这也不起作用。

.has-finished位于名为.astra-shop-thumbnail-wrap的.button属性上方的 div 内

倒计时代码为： <dive class="lottery-time-countdown is-wc-lotery_countdown" data-time="1617228000" data-lotteryid="205177" data-format> <span class="wc_lottery_countdown-row wc_lottery_countdown-show4">

按钮 HTML 代码为<a href="link"> data-quanity="1" class="button product_type_lottery" data-product_id="192520" data-product_sku aria-label="button"></a>

Answer 1

尝试添加一些像

$('.has-finished ~ .button').onclick = () => {};
$('.has-finished ~ .button').off();