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.

Answer 1

Using Only CSS:

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

<input class="no-click" />

Answer 2

Use :

resetBtn.disabled = "disabled";

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

Answer 3

Have you read through this answer or tried

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

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

Answer 4

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.

Answer 5

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?

Answer 6

You can do it with the method : setAttribute()

Your js will be like that :

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

Answer 7

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