Disable button with javascript-CodePudding

I have a button. The button works fine. After I have pressed the button, then it shall not be possible to press the button again. It will be best if the button looks diabled.

I have already tried with document.getElementById("id").disabled = true; but I can't make this work.

PHP code for the button. The code makes a list of buttons. Each button has id= 1, 2, 3 etc.

if($_COOKIE["sorterdb"]=='GR' || empty($_COOKIE["sorterdb"])){$dblinjer[$i]['nrlink']='<span id="para'.$i.'"></span><div ><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();
}

CodePudding user response：

You can set the button's disabled property to false (see Sütemény András's answer), but that may not work in all browsers. You can also remove the listener, however that doesn't make the button look disabled.

So a belt and braces approach is to do both, e.g.

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>

Note that if using setAttribute as in:

button.setAttribute('disabled', true);

the second argument is required but its value is irrelevant (it can be false, 'foo bar', 42, whatever). Regardless of the value, the element will be disabled, which is a hangover from ancient times when boolean attributes were added to HTML. Their presence alone does the job, they don't take a value (e.g. <button disabled>foo</button> creates a disabled button).

To unset the attribute (i.e. to enable the button again), use removeAttribute.

CodePudding user response：

If you have a button like this:

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

You can add javascript eventlistener, do the job, than disable:

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

And depending on your code, maybe you should add "removeEventListener" on your button.