Disable/Non-Clickable an HTML button in Javascript

Question

I have following HTML snippet for a button:

HTML:

<div class="Clear" title="Clear">
   <div class="ClearButton">
      <button id="reset" type="reset" title="Clear Photos"></button>
   </div>
   <div class="ClearText">
      Clear
   </div>
</div>

CSS:

div.ClearButton
{
   vertical-align: top;
   display: inline-block;
   background: url(../CustomControl/buttons.png?ver=365321878) no-repeat scroll -343px -443px rgba(0, 0, 0, 0);
   height: 16px;
   overflow: hidden;
   width: 16px;
}

div.Clear
{
   vertical-align: top;
   display: inline-block;
   overflow: hidden;
   cursor: pointer;
   padding-left: 2px;
   padding-bottom: 6px;
   padding-right: 6px;
   padding-top: 4px;
}

On a certain event, I need to disable this button completely. I tried with the following code, but it does not disable/gray out the button and it's still clickable.

var resetBtn = document.getElementById("reset");
resetBtn.disabled = true;

As someone suggested that the CSS I have applied is causing this issue. Please suggest how can I make this button non-clickable.

Setting .disabled on the element should work. Is it not? Is this code executing at all? Is resetBtn being populated with a DOM element at all? — David
– David, Commented Mar 17, 2014 at 14:15
Yes code is executing and resetBtn is being populated with a DOM element. — Azeem
– Azeem, Commented Mar 17, 2014 at 14:16
That should work, .disabled = true is a way to disable a button. Furthermore, it works in this fiddle: jsfiddle.net/ZJeC4 which probably means that you are calling it too early (button does not exist yet). — dkasipovic
– dkasipovic, Commented Mar 17, 2014 at 14:16

davidkonrad · Accepted Answer · 2014-03-21 20:32:59Z

14

Use :

resetBtn.disabled = "disabled";

This works in all browsers -> http://jsfiddle.net/fMV4B/

edited Mar 21, 2014 at 20:32

answered Mar 17, 2014 at 14:16

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

Comments

Abu Sufian · Accepted Answer · 2017-09-19 09:50:52Z

11

Using Only CSS:

//CSS
.no-click {pointer-events: none;}

<input class="no-click" />

answered Sep 19, 2017 at 9:50

Abu Sufian

4635 silver badges8 bronze badges

2 Comments

BillJustin Over a year ago

this is the simplest answer

Andy Over a year ago

This will still leave the button focusable and clickable by means of the keyboard.

Tom R. · Accepted Answer · 2014-03-17 14:21:13Z

4

You can do it with the method : setAttribute()

Your js will be like that :

document.getElementById("reset").setAttribute('disabled','disabled');

answered Mar 17, 2014 at 14:21

Tom R.

1983 silver badges10 bronze badges

Comments

Gary Stevens · Accepted Answer · 2014-03-17 14:19:01Z

2

This JSFiddle shows it working, based on this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_disabled. It could be that it's not working as expected because your CSS is making it visually appear different. Remove you CSS first to make sure the JavaScript it working as expected.

Here's the code for the JSFiddle:

<button type="button" id="test">Click Me!</button>

<script>
document.getElementById("test").disabled = true;
</script>

Do you have an example of when your JavaScript is running?

answered Mar 17, 2014 at 14:19

Gary Stevens

6938 silver badges20 bronze badges

5 Comments

Azeem Over a year ago

I am thinking the same way. I have placed all CSS in my post. Can you please suggest a way to disable button completely. The disable button code works when I remove CSS.

Gary Stevens Over a year ago

I'm guessing your background image (../CustomControl/buttons.png?ver=365321878) needs changing when you set 'disabled' to true. The easiest way to do this is to create a 'div.ClearButtonDisabled' class that has a different background image, slightly greyed out. Without being able to see the image and style of the button it's hard to know for sure.

Azeem Over a year ago

good idea, i will do that but how can I remove hand-shaped cursor when I move the cursor over button?

Gary Stevens Over a year ago

A Button shouldn't have a hand icon. Even when clickable the button should have a default arrow pointer. In your CSS you're setting 'cursor: pointer' - this is where the hand-shaped cursor is coming from. In your disabled CSS class, set 'pointer: auto;'

Karim AG Over a year ago

use event.stopPropagation() in your event

Community · Accepted Answer · 2017-05-23 11:46:30Z

1

Have you read through this answer or tried

https://stackoverflow.com/a/3014678/2992661

resetBtn.setAttribute('disabled', 'disabled');

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Mar 17, 2014 at 14:16

Dean Whitehouse

8941 gold badge9 silver badges26 bronze badges

3 Comments

Explosion Pills Over a year ago

Note that setAttribute is different than changing the property via .disabled =. I think it should still work the same, though.

Dean Whitehouse Over a year ago

True, I'd just taken that from the linked article to save the OP the time :)

davidkonrad Over a year ago

setAttribute does mostly make sense if the attribute not is natively supported.

Explosion Pills · Accepted Answer · 2014-03-17 14:18:11Z

0

Your code works fine.

The problem is almost certainly that the JavaScript code is either not being called at all or is being called in the wrong spot.

If you run this code immediately, make sure that the DOM is loaded (window.onload callback, or preferably have your JS code right before </body>).

Otherwise just make sure that any event that runs the JS code is actually firing.

answered Mar 17, 2014 at 14:18

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

1 Comment

Azeem Over a year ago

JS runs fine. I have used alerts to verify this. I think the CSS I have applied is not allowing disabled property to work.

Aniruddha Pondhe · Accepted Answer · 2014-03-17 14:25:02Z

0

Try this code:

To disable the submit button with jQuery, you just need to add a “disabled” attribute to the submit button.

$('#buttonId').click(function(){

    $('#buttonId').attr("disabled", true);  
});

To enable back the disabled submit button, set the “disabled” attribute to false, or remove the “disabled” attribute:

$('#buttonId').attr("disabled", false); 
or
$('#buttonId').removeAttr("disabled");

answered Mar 17, 2014 at 14:25

Aniruddha Pondhe

1,8803 gold badges18 silver badges30 bronze badges

Collectives™ on Stack Overflow

Disable/Non-Clickable an HTML button in Javascript

7 Answers 7

Comments

2 Comments

Comments

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related