Javascript/jQuery 按类名禁用按钮

Question

我有一个复杂的 Javascript 应用程序，它根据应用程序状态和只读权限填充一个按钮:

但本质上，按钮在添加到文档时看起来像这样:

<button type="button" id="..." class="btn btn-link btn-table-action btn-table-add-row" title="Add"></button>

ID 是自动生成的，事先不知道。此外，我们还有几个这样的按钮，它们都需要同时禁用/启用。

我尝试了以下但没有成功:

$(".btn-table-add-row").prop('disabled', true);

setInterval(function() {
  $(".btn-table-add-row").prop('disabled', true);
}, 1000);

var elems = document.getElementsByClassName("btn-table-add-row");
console.log(elems);
for(var i = 0; i < elems.length; i++) {
  elems[i].disabled = true;
}

以上示例都是在页面加载时尝试的，在文档加载完毕并且按钮可见之后。我能够读取上一个示例中的元素列表，但它们不会禁用。有什么建议吗？

Answer 1

我创建了一个 fiddle http://jsfiddle.net/mfleshman/yR9U3/

<button type="button" class="btn btn-link btn-table-action btn-table-add-row" title="Add">test</button>

<button type="button" class="btn btn-link btn-table-action btn-table-add-hide" title="Add">test</button>

$(".btn-table-add-row").prop('disabled', true);
$(".btn-table-add-hide").hide();

您声明按钮是“可见的”。禁用按钮不会将其从页面中隐藏，除非您有其他 CSS 选择器执行此操作。

如果您试图隐藏按钮，您需要在元素上调用 .hide()。