使用 javascript 禁用按钮

Question

我有一个按钮。该按钮工作正常。按下按钮后，将无法再次按下按钮。如果按钮看起来是禁用的，那将是最好的。

我已经尝试过 document.getElementById("id").disabled = true;但我无法完成这项工作。

按钮的 PHP 代码。该代码制作了一个按钮列表。每个按钮的 id=1、2、3 等。

if($_COOKIE["sorterdb"]=='GR' || empty($_COOKIE["sorterdb"])){$dblinjer[$i]['nrlink']='<span id="para'.$i.'"></span><div class="s-12 l-12"><button type="button" id="'.$i.'" value="'.$dblinjer[$i]['loebid'].'_'.$dblinjer[$i]['tid'].'_'.$dblinjer[$i]['utcstart'].'" onclick=baadimaal("baadimaal",this)>'.$dblinjer[$i]['buttonnrsejl'].'</button></div>';}

javascript：

function baadimaal(str,el) {
    var x = el.value
    var id = el.getAttribute("id")
    
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        document.getElementById("container"+id).innerHTML = this.responseText; //her placeres svaret, som kommer tilbage fra hide-ajax-svar filen
    }
    xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "&para=" + x + "&i=" + id); //overfør str og x til hide-ajax-svar filen
    xhttp.send();
}

Answer 1

您可以将按钮的 disabled 属性设置为 false（请参阅Sütemény András's answer），但这可能不适用于所有浏览器。您也可以移除监听器，但这不会使按钮看起来被禁用。

因此，腰带和大括号的方法是两者都做，例如

window.onload = function() {
  // Listener
  function clickFn() {
    console.log('I\'ve been clicked! But no more…');
    // Make button appear disabled
    this.disabled = true;
    // Remove the listener
    this.removeEventListener('click', clickFn);
  }
  // Add the listener to the button
  document.getElementById('b0').addEventListener('click', clickFn, false);
};

<button id="b0">Click me</button>

注意，如果使用 setAttribute 如：

button.setAttribute('disabled', true);

第二个参数是必需的，但它的值无关紧要（它可以是false、'foo bar'、42，等等）。无论值如何，元素都将被禁用，这是从古代将布尔属性添加到 HTML 的遗留问题。他们的存在独自完成了这项工作，他们不接受价值（例如<button disabled>foo</button> 创建一个禁用按钮）。

要取消设置属性（即再次启用按钮），请使用removeAttribute。

Answer 2

如果你有这样的按钮：

<button class="button" id="1">Button 1</button>
<button class="button" id="2">Button 2</button>
<button class="button" id="3">Button 3</button>

您可以添加 javascript 事件监听器，完成这项工作，而不是禁用：

const buttons = document.querySelectorAll(".button")

buttons.forEach((item) => {
    item.addEventListener("click", ()=>{

    // DO SOMETHING WHITH YOUR BUTTON
    console.log(`You've clicked on ${item.id} and now I'm gonna disable it.`)

    // disable
    item.disabled = true;
    })            
})

根据您的代码，也许您应该在按钮上添加“removeEventListener”。