如何禁用 Bootstrap 上的按钮？答案

【问题标题】：How to disable a button on Bootstrap?如何禁用 Bootstrap 上的按钮？
【发布时间】：2018-06-18 19:52:31
【问题描述】：

这是我的网站“Drupal 8”和“Drupal Commerce 2”：

https://www.s1biose.com/produit/savon-artisanal-bio-la-cannelle

我想禁用“添加到购物车”按钮。所以我在我的主题的 JS 文件中添加了以下代码：

(function ($) {

  $('.commerce-order-item-add-to-cart-form .btn').prop("disabled", true);

})(window.jQuery);

可以，但是有问题。

当我更改产品的变体时，按钮会激活。为什么？

我希望他被禁用。

在这个屏幕截图上它可以工作：

enter image description here

在此屏幕截图中，当我更改产品的变体（不重新加载页面）时，禁用的类消失了：

enter image description here

【问题讨论】：

我猜这是由于当您更改产品的变体时，您将属性“禁用”设置为 true 的按钮（或节点）正在被替换（由新节点） .为了使此按钮保持禁用状态，您必须例如每次更改变体时，将 prop 'disabled' 设置为 true。
@Kurzalead 谢谢你的解释。这该怎么做？ s1biose.com/produit/savon-artisanal-bio-la-cannelle
我无法给你一个工作示例，因为我无权访问你的源代码。此外，我对为你做你的工作不感兴趣，而是提示你自己做一些研究。
如果“按钮”实际上是一个“链接”，即一个锚标签，你需要使用.disabled类作为锚忽略禁用的属性例如：<a href="#" class="btn btn-primary btn-lg disabled"
很难通过您的代码来判断，因为它没有进行任何类型的条件测试来确定按钮状态。如果用户更改购物车内容，这通常涉及某种形式的回发，那么我认为该按钮应该变为活动状态。所以你需要要么在服务器端管理按钮状态，要么将按钮状态信息传递给 JQ 代码。

标签： javascript css twitter-bootstrap drupal

【解决方案1】：

可能是 ajax 更新它，我会将您的代码添加到 Drupal 行为中（行为在 ajax 之后加载）：

(function ($) {
  'use strict';

  Drupal.behaviors.commerceDisableAjax = {
    attach: function (context, settings) {
      $('.commerce-order-item-add-to-cart-form .btn').prop("disabled", true);    
    }
  };

}(jQuery));

【讨论】：

谢谢它的工作，我用你的代码在我的主题中创建了一个新的 JS 文件。
我复制粘贴了你的代码。我必须定制一些东西吗？他必须离开我的行为
您可以将“myBehavior”更改为“commerceDisableAjax”或任何标识行为的内容，即它正在完成的功能。
我不懂JS。我已经更新了你的答案，你能告诉我这是否正确吗？
是的，应该可以完成这项工作:)