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, Mar 17 '14 at 14:15
Yes code is executing and resetBtn is being populated with a DOM element. — Azeem, Mar 17 '14 at 14:16
That should work, .disabled = true is a way to disable a button. Furthermore, it works in this fiddle: http://jsfiddle.net/ZJeC4/ which probably means that you are calling it too early (button does not exist yet). — dkasipovic, Mar 17 '14 at 14:16

davidkonrad · Answer 1 · 2014-03-21T20:32:59.583

14

Use :

resetBtn.disabled = "disabled";

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

edited Mar 21 '14 at 20:32

answered Mar 17 '14 at 14:16

davidkonrad

83,997
17
205
265

score 10 · Answer 2 · answered Sep 19 '17 at 09:50

10

Using Only CSS:

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

<input class="no-click" />

answered Sep 19 '17 at 09:50

Abu Sufian

439
5
8

this is the simplest answer – BillJustin Sep 16 '20 at 07:56
1

This will still leave the button focusable and clickable by means of the keyboard. – Andy Aug 03 '22 at 10:10

score 4 · Answer 3 · answered Mar 17 '14 at 14:21

4

You can do it with the method : setAttribute()

Your js will be like that :

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

answered Mar 17 '14 at 14:21

Tom R.

198
3
10

score 2 · Answer 4 · answered Mar 17 '14 at 14:19

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 '14 at 14:19

Gary Stevens

693
8
20

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. – Azeem Mar 17 '14 at 14:29
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. – Gary Stevens Mar 17 '14 at 14:35
good idea, i will do that but how can I remove hand-shaped cursor when I move the cursor over button? – Azeem Mar 17 '14 at 14:39
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;' – Gary Stevens Mar 17 '14 at 14:46
use event.stopPropagation() in your event – Karim AG Mar 17 '14 at 14:51

score 1 · Answer 5 · edited May 23 '17 at 11:46

1

Have you read through this answer or tried

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

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

edited May 23 '17 at 11:46

Community

1
1

answered Mar 17 '14 at 14:16

Dean Whitehouse

884
1
8
25

Note that `setAttribute` is different than changing the *property* via `.disabled =`. I think it should still work the same, though. – Explosion Pills Mar 17 '14 at 14:18
True, I'd just taken that from the linked article to save the OP the time :) – Dean Whitehouse Mar 17 '14 at 14:22
`setAttribute` does mostly make sense if the attribute not is natively supported. – davidkonrad Mar 17 '14 at 14:22

score 0 · Answer 6 · answered Mar 17 '14 at 14:18

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 '14 at 14:18

Explosion Pills

188,624
52
326
405

JS runs fine. I have used alerts to verify this. I think the CSS I have applied is not allowing disabled property to work. – Azeem Mar 17 '14 at 14:34

score 0 · Answer 7 · answered Mar 17 '14 at 14:25

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

Disable/Non-Clickable an HTML button in Javascript

7 Answers7

Linked