CODEWITHSUNDEEP
javascripthtmlcss
Azeem
Azeem

Reputation: 2924

Disable/Non-Clickable an HTML button in Javascript

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.

Upvotes: 20

Views: 89993

Answers (7)

Abu Sufian
Abu Sufian

Reputation: 453

Using Only CSS:

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

<input class="no-click" />

Upvotes: 10

davidkonrad
davidkonrad

Reputation: 85528

Use :

resetBtn.disabled = "disabled";

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

Upvotes: 14

Aniruddha Pondhe
Aniruddha Pondhe

Reputation: 1870

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

Upvotes: 0

Tom R.
Tom R.

Reputation: 198

You can do it with the method : setAttribute()

Your js will be like that : 

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

Upvotes: 4

Gary Stevens
Gary Stevens

Reputation: 693

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?

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191749

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.

Upvotes: 0

Dean Whitehouse
Dean Whitehouse

Reputation: 894

Have you read through this answer or tried

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

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

Upvotes: 1

Related Questions