How to Disable Onclick Without Altering Its Function

Is it possible to disable onclick without altering its function?

Use the disabled attribute to disable a button.

<button onclick="alert('clicked')">Enabled</button>
<button onclick="alert('clicked')" disabled>Disabled</button>

The advantage of this method (over the "pointer events" suggested in an alternative answer) is that it will not only stop you using the button as a mouse user, but will also stop assistive technologies and anyone using the keyboard.

In JavaScript, you can disable or enable the attribute with:

el.disabled = true;   // Disable.
el.disabled = false; // Enable.

Or with jQuery you can do:

$('button').prop('disabled', true);   // Disable.
$('button').prop('disabled', false); // Enable.

how to disable or enable all onClick for images on a page

Your solution doesn't work because you removed your onClick with onClick = false. After that you need to create the onClick event handler again.

This is probably your way of adding onclick events, I changed it so it should work.

<img src="image1.jpg" onclick="when_i_click();"/>
<img src="image2.jpg" onclick="when_i_click();"/>

Try adding a function to your onclick as above.

Your onclick function:

var when_i_click = function(){
alert('image clicked!');

This is how you disable your onclicks (your method)

var eles = document.getElementsByTagName('img');
for (var i=0; i < eles.length; i++)
eles[i].onclick = null;

This is how you re-enable them (re-attach function to onClick )

var eles = document.getElementsByTagName('img');
for (var i=0; i < eles.length; i++)
eles[i].onclick = when_i_click;

This is a Jquery solution jquery:

Try using unobstructive javascript, by not adding onclick event handlers in the DOM.

var function_is_finished = false;
if(function_is_finished) {
//Do your stuff when someone clicks on Img

When your function is finished just set function_is_finished to true

Disable button onclick without using disable attribute

One way is by adding and removing event listeners.

const showAlert = () => alert('Hi');
const addListener = () => { const btn = document.querySelector('#clickme'); clickListener = btn.addEventListener('click', showAlert); btn.classList.remove('disabled');};
document.addEventListener('DOMContentLoaded', () => { addListener(); });
function disableButton() { const btn = document.querySelector('#clickme'); document.querySelector('#clickme').removeEventListener('click', showAlert); btn.classList.add('disabled');}
function enableButton() { addListener();}
button {  cursor: pointer;}
#clickme { background-color: #E2343F;}
#clickme.disabled { cursor: auto; background-color: grey;}
<div class="container">  <button id="clickme">Click Me</button>  <div class="">    <button onclick="disableButton()" class="disable">Disable Button</button>    <button onclick="enableButton()" class="enable">Enable Button</button>  </div></div>

cannot disable onclick()

You should make the function return false to disable the event

function EditField(editableObj,column,app_id) {
if ($(this).attr('disabled')) {
return false;

$(this).attr('disabled', true);
var data = `<input type="checkbox" name="YesNo" id="YesNo" checked data-toggle="toggle" data-off="No" data-on="Yes" data-onstyle="success" data-offstyle="danger">`;

How to disable and then enable onclick event on <div> with javascript

You can use the CSS property pointer-events to disable the click event on any element:

// To disable:    
document.getElementById('id').style.pointerEvents = 'none';
// To re-enable:
document.getElementById('id').style.pointerEvents = 'auto';
// Use '' if you want to allow CSS rules to set the value

Here is a JsBin:

Disable onclick until JS function is done

The easiest way to do this is to have some sort of flag value:

var pending = false;

function changeQuestion(nam)
// test to see if something else set the state to pending.
// if so... return, we don't want this to happen.
if(pending) return;
pending = true; // raise the flag!

/* ... later ... */
// in the success method of your AJAX call add:
pending = false;

jQuery: Disable onclick event using off() not working

One way would be to temporarily set the onclick to null, but store the original element onclick in the element or jquery object (e.g. data). With a helper function you can switch the elements on or off:

function setEnabled($a, Enabled ){
$a.each(function(i, a){
var en = a.onclick !== null;
if(en == Enabled)return;
a.onclick = $(a).data('orgClick');
a.onclick = null;

Which can be called with something like:

setEnabled($('#validate'), false); 

(also works on jquery objects with multiple elements because of the each)

Example fiddle

Related Topics

Leave a reply