jQuery click event on disabled input field
You can't fire any mouse event like click on a disabled HTML element. Alternative of this, is to wrap up the element in a span or div and perform the click event on those.
$("div").click(function (evt) {
// do something
});
One more alternate is to make the element readonly
instead of disabled
, but bear in mind that jQuery does not have a default :readonly
selector.
Clicking a disabled input or button
There is no way to capture a click on disabled elements. Your best bet is to react to a specific class
on the element.
HTML Markup:
<input type="button" class="disabled" value="click" />
JavaScript code:
$('input').click(function (event) {
if ($(this).hasClass('disabled')) {
alert('CLICKED, BUT DISABLED!!');
} else {
alert('Not disabled. =)');
}
});
You could then use CSS styling to simulate a disabled look:
.disabled
{
background-color: #DDD;
color: #999;
}
Here's a jsFiddle demonstrating its use.
Event on a disabled input
Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.
I can't think of a better solution but, for complete cross browser compatibility, you could place an element in front of the disabled input and catch the click on that element. Here's an example of what I mean:
<div style="display:inline-block; position:relative;">
<input type="text" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>
jq:
$("div > div").click(function (evt) {
$(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});
Example: http://jsfiddle.net/RXqAm/170/ (updated to use jQuery 1.7 with prop
instead of attr
).
Related Topics
Pass Node Js Variable to Ejs Template
Save Only Date Without Timezone JavaScript
Jquery Wait Until Ajax Call Has Got Data Before Displaying
Chat Box, Auto Scroll to Bottom
How to Get Values of Checkbox in Node Js Using Ejs
How to Mock the JavaScript Window Object Using Jest
Reactjs, Table Cell With Different Background Color
How to Wait Until All JavaScript Files Are Loaded Before Executing JavaScript Code
How Stop After Running React-Scripts Start
How to Iterate Through Json Nested Objects With Ngfor
How to Add Pm or Am Based on Hour from Input
React Router Dom Returns a Blank Page When Going to a Particular Route
How to Get the Id of a Button That Was Clicked - Reactjs
Javascript Validation: Block Special Characters
Javascript, Viewing [Object Htmlinputelement]