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;
}

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

Answer 1

正如 Satpal 和您自己所提到的，代码是正确的（至少我尝试过的第一句话），所以问题可能出在按钮的创建顺序上，或者可能在其他执行过程中出错导致你的代码无法运行的 JS 代码。

我还为此创建了一个小提琴，您的代码正在运行：http://jsfiddle.net/gx7zC/

$(document).ready(function(){
var btnAmount = Math.floor((Math.random() * 10) + 1);
for(var i=0; i<btnAmount;i++){
    var newButton = document.createElement("button");
    $(newButton).addClass("btn btn-link btn-table-action btn-table-add-row");
    newButton.id = "btn"+i;
    $(newButton).text("btn"+i);
    document.body.appendChild(newButton);
}
$(".btn-table-add-row").prop('disabled', true);

});

Answer 2

我创建了一个小提琴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() 的按钮。