时间戳

首页 > 解决方案 > 如何在 JS 中禁用按钮单击页面加载？

javascript - 如何在 JS 中禁用按钮单击页面加载？

问题描述

我在DOM中有一个 HTML 代码，如下所示。以下 HTML 代码在页面加载时显示：

<td style="width:5%; text-align:center;"><button style="text-align:center; width:120px;" data-id="0"  class="converter btn btn-outline-primary"> Completed                  </button></td>

<td style="width:5%; text-align:center;"><button style="text-align:center; width:120px;" data-id="1"  class="converter btn btn-outline-primary"> Completed                  </button></td>

当按钮标记中的文本完成时，我希望在按钮上禁用单击。

这是我尝试过的：

var x = document.getElementsByClassName("converter");

for (var i = 0; i < x.length; i++) {
    if (document.getElementsByClassName('converter').innerText[i] == "Completed") {     // Line A
        document.getElementsByClassName('converter').disabled = true;
    }
}

我在A 行遇到错误：

未捕获的类型错误：无法读取未定义的属性“0”

标签： javascriptbutton

解决方案

可以这样吗？

var elements = document.querySelectorAll(".converter"); // use querySelectorAll(".className") 
elements.forEach(function(element) { // elements is an array you need to iterate over it
    console.log(element.innerText);  // just to log and see something if it works ...
    if("Completed" === element.innerText) { // this is the test
        element.setAttribute('disabled', 'disabled'); // set the attribute
    }
});
<td style="width:5%; text-align:center;"><button style="text-align:center; width:120px;" data-id="0"  class="converter btn btn-outline-primary"> Completed                  </button></td>

<td style="width:5%; text-align:center;"><button style="text-align:center; width:120px;" data-id="1"  class="converter btn btn-outline-primary"> Completed                  </button></td>

在此处阅读有关 document.querySelectorAll() 以及如何使用它的更多信息

推荐阅读