Question

我希望默认情况下加载一个禁用按钮，但是在单击按钮时将其更改为启用。我就是这样做的。

<button id="Btn" class="navBtn" disabled onclick="enableBtn()">click to enable</button>

function enableBtn() {
   document.getElementById("Btn").disabled = false;
}

但它没有用......

我已尝试默认加载已启用的按钮，然后点击停用，但反之则无效...

我正在使用HTML和JavaScript

Answer 1

您正在尝试点击已停用的按钮。该按钮已被禁用，因此无法单击该按钮。

为什么要尝试制作它，以便您必须先点击激活它？也许整个问题有更好的解决方案？

编辑：按钮的实际用途是切换布尔值，这可以很容易地完成。

var enableFeature = false;

function toggleFeature(){
    enableFeature = !enableFeature;
    (put code setting the feature's status to enableFeature here)
}

https://www.w3schools.com/js/js_booleans.asp

Answer 2

您可以使用此代码 -

//html 
<button id="Btn" class="navBtn" onclick="enableBtn()">click to enable</button>

//js
function enableBtn() {
document.getElementById("Btn").setAttribute("disabled", "false")
}

Answer 3

禁用按钮无法触发click方法，您最好添加一个CSS类，使按钮看起来像禁用。

以下是一个例子：

    <style>
     button.inactive {
       border: 1px solid #999999;
       background-color: #cccccc;
       color: #666666;
     }
    </style>

    <button id="Btn" class="navBtn" onclick="toggleBtn()">click to enable</button>

    <script>
    var buttonEnabled = true;
    function toggleBtn() {
      if（buttonEnabled){
         document.getElementById("Btn").className = "navBtn inactive"
      } else {
         document.getElementById("Btn").className = "navBtn";
      }
      buttonEnabled = !buttonEnabled;
    }
    </script>

Answer 4

您可以通过在其周围添加一个侦听click事件以启用基础按钮的包装来解决此问题。

<div id="btnWrapper"  onclick="enableBtn()">
  <button id="Btn" class="navBtn" disabled>click to enable</button>
</div>

但是，这种方法需要增加CSS：pointer-events，这在桌面浏览器上得到了很好的支持。这是我添加到按钮的CSS：

#Btn {
  pointer-events:none;
}

这使您可以在单击时启用按钮。

生活例子：

function enableBtn() {
  console.log('button enabled');
  document.getElementById("Btn").disabled = false;
}

#Btn {
  pointer-events:none;
}

<div id="btnWrapper"  onclick="enableBtn()">
  <button id="Btn" class="navBtn" disabled>click to enable</button>
</div>

HTML：无法通过onclick启用按钮

4 个答案: