How to disable HTML button on the click using Javascript?

Question

Once my button gets clicked, it should get disabled and never be clicked again until the page is refreshed. Below is my code:

<html>
<head>
<script type="text/javascript">
function myButtonClicked()
{
    alert("Has myButton got disabled? I need solution for this.");
}
</script>
</head>
<body>
<button type="button" id="myButton1" onclick="myButtonClicked()">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked()">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked()">Click ME</button>
</body>
</html>

Before calling myButtonClicked function, it should get disabled. Actually, I want to write a PHP script in this function which will fetch some data from database which will take some time in real environment. That is why I want to disable the button. How do I achieve that?

jsbin.com/falevumo/1/edit

Naveen Kumar Alone
– Naveen Kumar Alone

2014-04-23 05:48:38 +00:00
Commented Apr 23, 2014 at 5:48 — Naveen Kumar Alone
– Naveen Kumar Alone, Commented Apr 23, 2014 at 5:48

Felix · Accepted Answer · 2014-04-23 05:37:45Z

7

You can pass this to your function:

<button type="button" id="myButton1" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this)">Click ME</button>

then you can use:

function myButtonClicked(el)
{
    el.disabled = true; 
}

Fiddle Demo

with jQuery you can use .click() along with .prop():

$('button').click(function() {
    $(this).prop('disabled',true);
});

Fiddle Demo

answered Apr 23, 2014 at 5:37

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Derek 朕會功夫 Over a year ago

Yup, gotta mention jQuery 'cause it solves every problem in the whole universe :P

user1556433 Over a year ago

@Felix - If I write alert("hello"); after el.disabled = true; in your fiddle, alert is not fired, although button is disabled.

user1556433 Over a year ago

@Felix - yes, it worked, sorry it was my mistake :). Thanks for the simple solution for my problem. Accepting your answer.

Petroff · Accepted Answer · 2014-04-23 05:39:44Z

2

function myButtonClicked()
{
    $(this).prop('disabled', true);
}

Is it helping?

answered Apr 23, 2014 at 5:39

Petroff

8281 gold badge12 silver badges30 bronze badges

2 Comments

Petroff Over a year ago

do you have jQuery included?

Petroff Over a year ago

if its old version .prop may not work. try with .attr("disabled", true);

Prabhat Jain · Accepted Answer · 2014-04-23 05:38:57Z

1

Add -

function myButtonClicked()
{
    alert("Has myButton got disabled? I need solution for this.");
    this.disabled = true;
}

answered Apr 23, 2014 at 5:38

Prabhat Jain

3461 silver badge8 bronze badges

Comments

Daniel · Accepted Answer · 2014-04-23 05:42:02Z

1

Give your element as an argument within calling teh function

   <button type="button" id="myButton1" onclick="myButtonClicked(this)">Click ME</button>
   <button type="button" id="myButton2" onclick="myButtonClicked(this)">Click ME</button>
   <button type="button" id="myButton3" onclick="myButtonClicked(this)">Click ME</button>

And set the element attribute "disabled" to true

function myButtonClicked(obj) {
        obj.setAttribute("disabled", true);
    }

fiddle: http://jsfiddle.net/quJX8/

answered Apr 23, 2014 at 5:42

Daniel

4,9643 gold badges30 silver badges33 bronze badges

Comments

Naveen Kumar Alone · Accepted Answer · 2014-04-23 05:43:52Z

1

JSBIN

$("button").click(function() {
  $('#'+this.id).prop('disabled', true);
});

answered Apr 23, 2014 at 5:43

Naveen Kumar Alone

7,6985 gold badges40 silver badges59 bronze badges

Comments

Prabhat Jain · Accepted Answer · 2014-04-23 05:51:08Z

0

You can disable like this, this is self explainable:

<script>
function myButtonClicked(id)
{
    alert("Has myButton got disabled? I need solution for this.");

    $("#" + id).attr("disabled", true);
}
</script>

<body>
<button type="button" id="myButton1" onclick="myButtonClicked(this.id)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this.id)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this.id)">Click ME</button>
</body>

answered Apr 23, 2014 at 5:51

Prabhat Jain

3461 silver badge8 bronze badges

Comments

RufusVS · Accepted Answer · 2018-02-27 22:08:15Z

0

There are simpler ways than rewriting your function and passing "this". Just use "this" in your onclick attribute:

<button type="button" id="myButton1" onclick="this.disabled=true;myButtonClicked()">Click ME</button>

That will disable it, but it isn't necessarily that visibly obvious on the form. I like to use:

<button type="button" id="myButton1" onclick="this.style.visibility='hidden';myButtonClicked()">Click ME</button>

Which "disappears" it, but it still holds its place in the form.

If you don't need the placeholder, you can also use:

<button type="button" id="myButton1" onclick="this.hidden=true;myButtonClicked()">Click ME</button>

answered Feb 27, 2018 at 22:08

RufusVS

4,1553 gold badges33 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to disable HTML button on the click using Javascript?

7 Answers 7

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related