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.
<script>
(function(){
var function_is_finished = false;
$('img').on('click',function(event){
if(function_is_finished) {
//Do your stuff when someone clicks on Img
}
});
})();
</script>
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;
}
$(editableObj).css("background","#B8B8FA");
$(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">`;
$(editableObj).html(data)
}
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:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
// 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: http://jsbin.com/oyAhuRI/1/edit
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;
if(Enabled){
a.onclick = $(a).data('orgClick');
}
else
{
$(a).data('orgClick',a.onclick);
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
Onclick Button Get from Database and Display on a Input Field Live
Localstorage Values Get Reset After Refreshing Page and Inserting New Values
How to Set a Value to a File Input in HTML
Using JavaScript to Detect Whether the Url Exists Before Display in Iframe
Check If Second String Is Rotation of Another String
Regular Expression to Get a String Between Two Strings in JavaScript
Convert Date/Time in Gmt to Est in JavaScript
How to Add Multiple Values in Json Object and Get an Updated Json File
How to Get the Name of the Current Windows User in JavaScript
Regex to Replace Everything Except Numbers and a Decimal Point
Foreach Is Not a Function Error With JavaScript Array
How to Make a Bot Delete Messages After a Certain Time Period
How to Remove Forward and Backward Slashes from String in JavaScript
How to Correctly Use Axios Params With Arrays
How to Use Js to Open an HTML Select to Show Its Option List
How to Simulate Key Press Events Programmatically
How to Reload Datatables from Another Ajax Request With Onclick