Disable/Non-Clickable an HTML button in Javascript

I have following HTML snippet for a button:

HTML:

<div title="Clear"> <div> <button type="reset" title="Clear Photos"></button> </div> <div> 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.

7 Answers

Use :

resetBtn.disabled = "disabled"; 

This works in all browsers ->

Using Only CSS:

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

You can do it with the method : setAttribute()

Your js will be like that :

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

This JSFiddle shows it working, based on this: . 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">Click Me!</button> <script> document.getElementById("test").disabled = true; </script> 

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

Have you read through this answer or tried

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

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.

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