javascript - 使用 Javascript 启用 Bootstrap 按钮

Question

同事们，我的 html 页面上有一个 Bootstrap 按钮:

.....
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...

    <div class="accept-btn">
      <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
    </div>

我有 JavaScript 函数应该激活(启用)它:

    function activateAcceptButton() {
        const accBtn = document.getElementsByClassName('accept-btn');
        //accBtn[0].disabled = false;
        //accBtn[0].classList.add('accept-btn-vis');
        //accBtn[0].setProperty("disabled", false);
        //accBtn[0].style.setProperty("enable", true);

        accBtn[0].removeClass('disabled');
    }

当函数被调用时，没有任何变化。你能帮我激活按钮吗？我需要如何更改js功能？ 谢谢。

Answer 1

您使用的选择器不正确。 document.getElementsByClassName('accept-btn') 将选择 div。相反，您可以使用后代选择器 (>) 直接引用按钮。您可以使用:document.querySelector('.accept-btn > button')。

此外，您可以在按钮上使用 .classList.remove() 而不是 .removeClass()。

function activateAcceptButton() {
  const accBtn = document.querySelector('.accept-btn > button');
  accBtn.classList.remove('disabled');
}

function acceptPmt() {}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...

<div class="accept-btn">
  <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>


<button onclick="activateAcceptButton()">Activate</button>

或者，您可以保持选择器不变，并选择 div 的第一个子元素。该函数中的注释语句也需要相应地修改:

function activateAcceptButton() {
  const accBtn = document.getElementsByClassName('accept-btn');
  accBtn[0].children[0].classList.remove('disabled');
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...

<div class="accept-btn">
  <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>


<button onclick="activateAcceptButton()">Activate</button>