Temporarily disable button using jQuery - javascript

I would like to disable a button element without removing the listener, for example I have ths following code:
<input id="in" />
<button id="sub">Submit</button>
$('#sub').click(function (e) {
//Some actions
});
$($('#in').keyup(function (e) {
if (new Date($(this).val()) == 'Invalid Date') {
$(this).addClass('invalid');
$('#sub').addClass('disabled');
}
else {
$(this).removeClass('invalid');
$('#sub').removeClass('disabled');
}
});
I would like to unbind the button click listener, but if I'll use off() or unbind() I will have to 're-bind' it in the else clause.
Is there any better way of doing this?

How about disabling the button instead of adding a class?
HTML:
<button>Disable Me</button>
JS
$(function() {
$("button").click(function() {
alert("click!");
$(this).prop("disabled", true);
});
});
CSS
button[disabled] {
color: red;
}
Here is a jsFiddle to demonstrate.

use $('#sub').prop('disabled');

Related

jQuery event listener fires before selector applied

I am trying to make a system that would require an admin to click a delete button twice before it fires the action. if he focusout of the button, it resets.
$(".unarmed").css("filter", "grayscale(1)").removeClass("armed").click(function(e) {
$(this).css("filter", "").removeClass("unarmed").addClass("armed");
}).mouseout(function() {
$(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed");
});
$("body").on("click", ".armed", function() {
alert("boom");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="plus.png">
I've seen jQuery event listener fires before selector applied? but adding e.stopPropagation() causes the second click to not fire.
when e.stopPropagation() is not in the code, it does fire the second click, but together with the first click (i think this means the problem is not with the second click selector)
here is a fiddle with e.stopPropagation():
https://jsfiddle.net/3jyr72t6/
also, if you have suggestion for making it prettier, i'm open for suggestions :D
#icecub answer as snippet:
$(document).ready(function() {
$(".unarmed").css("filter", "grayscale(1)");
$(".unarmed").click(function(e) {
if ($(this).hasClass("armed")) {
console.log("boom");
}
$(this).css("filter", "").removeClass("unarmed").addClass("armed");
}).mouseout(function() {
$(this).css("filter", "grayscale(1)").removeClass("armed").addClass("unarmed");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="https://kns.im/include/img/plus.png" style="width:50px">
You can always just use the jquery dblclick event. Jquery dblclick
$(document).on("dblclick",".btn-delete",function(){
console.log("DELETE");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn-delete">DELETE</button>
You can use a simple function to detect click outside the element .. See the next example
$("img.unwait").on("click" , function(e){
let $this = $(this);
if($this.hasClass("unarmed")){
$this.removeClass("unarmed").addClass("armed");
}else if($this.hasClass("armed")){
alert("BOOM");
$this.removeClass("armed").addClass("unarmed");
}
});
detect_click_out(".armed" , function(){
$(".armed").removeClass("armed").addClass("unarmed");
});
function detect_click_out(element_selector , action){
$(document).on('click',function(e){
if (!$(element_selector).is(e.target) // if the target of the click isn't the container...
&& $(element_selector).has(e.target).length === 0) // ... nor a descendant of the container
{action();} // run the action as a function
});
}
img{
width : 50px;
}
.unarmed{
filter : grayscale(1);
}
.armed{
filter : grayscale(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="unwait unarmed" src="https://png.pngtree.com/element_our/sm/20180515/sm_5afb099d307d3.jpg">

disable click after clicking on $('body').on('click') event

hi I want to disable click after the user clicked on an element
the elements loaded after my script (elements built by javascript) and I can't use these code
$('.disableClick').click(
function (e) {
e.stopPropagation();
return false;
}
)
and I use these code to do work on the element by click
$('body').on('click','.disableClick',
function (e) {
if(!is_valid)
{
e.preventDefault();
e.stopPropagation();
return false;
}
}
);
I think disabling click codes like e.stopPropagation() don't support for
$('body').on('click')
event
try this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$('body').on('click','.disableClick',
function (e) {
$(this).attr("disabled", true);
}
);
</script>
It works on body as well as on document both
You need to use unbind I guess.
Try
if(!is_valid){
$('selector').unbind("click")
}

Double click on Disabled radio button is initiating click event in IE11

Is there any workaround to prevent the click on disabled radio button if it is in disabled mode.
$(document).ready(function() {
$(document).dblclick(function (e) {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
return false;
});
});
I tried the above code but still ondblclick event is initiating on my radio button in disabled mode.
You can use css to avoid clicking on radio button
.avoid-clicks {
pointer-events: none;
}
I have implemented following fiddle.Hope it helps you.
$(document).ready(function() {
$('#test').prop('disabled',true);
// document.getElementById('test').disabled=true;
$('#test').dblclick(function (e) {
if(e.target.disabled==true)
return;
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
console.log("test");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="radio"/>

disable a link after click using jQuery

I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...
Apparently, my $this isn't pointing to the correct object, or something =)
----------- UPDATE ---------------
SORRY, update above. The element I have is not a button, it is a link styled as a button...
Don't try to disable the Anchor tag. Try to set the href instead.
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).off("click").attr('href', "javascript: void(0);");
//add .off() if you don't want to trigger any event associated with this link
});
You only need to stop defaultevent from links.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
e.preventDefault();
});
This works for me:
$('a').css("pointer-events", "none");
In my case I used the following:
onclick="$(this).css('pointer-events', 'none');"
It works fine.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class='btn'>But1</button>
<button class='btn'>But2</button>
</div>
Instead of using this, you can just specify your target by using its id.
$('.btn').on('click', function(e) {
$('#btn2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>
Hope it helps
$('.btn').on('click', function(e) {
$(this).attr('disabled', true);
});
Check this post: https://stackoverflow.com/a/5876747/5243272
This works (in chrome), but perhaps some drawbacks?
$('.btn').on('click', function(e) {
if( $(this).prop('disabled') == true) {
return false;
}
$(this).prop('disabled',true);
});
$(document).ready(function() {
$('.btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
alert('I have been clicked!');
$(this).css('pointer-events', 'none').css('cursor', 'default');
});
});
This will prevent any other further clicks on that link.
If your Html like this
This is another paragraph.
use below code :
$(".test").one("click", function() {
var clas = $(this).attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
If your Html like this
<button class="btn">This is another paragraph.</button>
use below code :
$(".btn").one("click", function() {
var clas = $(this).parent().attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});

Strange behaviour with jquery .click() event

I think I'm trying to doing a simple thing but probably i miss something.
I've this little HTML
<div class="open"> OPEN</div>
with this simple CSS:
.open {
color: green;
}
.close {
color: red;
}
Now want to catch .click() events on the div but i want to select the with the class selector.
And for second i need to change the class and catch again a different .click() event based on the class. So I used this JQuery code:
$('.open').click(function() {
alert('open');
$(this).removeClass('open');
$(this).addClass('close');
$(this).text('CLOSE');
});
$('.close').click(function() {
alert('close');
$(this).removeClass('close');
$(this).addClass('open');
$(this).text('OPEN');
});
But this not work:
First click: right alert, class change, text change
Second click: wrong alert, class not change, text not change
You can check this jsfiddle: JsFiddle Example
Can you help me?
Thanks
You can simply do this with:
$('.open').click(function(){
var txt = $.trim(this.textContent) == "OPEN" ? "CLOSE" : "OPEN";
$(this).toggleClass('open').text(txt);
// $(this).toggleClass('open close').text(txt);
// use the commented line if you want to toggle the classes on each click.
});
.open {
color: green;
}
.close {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open"> OPEN</div>
you need event delegation for this. since in the beginning, there is no div with the class close, the click handler is assigned to nothing.
just wrap your div
OPEN
and assign the click handler to the main div
$('.wrapper').on("click", ".open",function() {
alert('open');
$(this).removeClass('open');
$(this).addClass('close');
$(this).text('CLOSE');
});
$('.wrapper').on("click", ".close",function() {
alert('close');
$(this).removeClass('close');
$(this).addClass('open');
$(this).text('OPEN');
});
instead of $(this).removeClass('close'); $(this).addClass('open'); you shout consider to use $(this).toggleClass('open close');
https://jsfiddle.net/ezxe9ca8/2/
Try this,
$('.general').click(function() {
var status = $(this).attr('data-status');
if(status == 'open') {
alert('open');
$(this).removeClass('open');
$(this).addClass('close');
$(this).text('CLOSE');
$(this).attr('data-status', 'close');
} else if(status == 'close') {
alert('close');
$(this).removeClass('close');
$(this).addClass('open');
$(this).text('OPEN');
$(this).attr('data-status', 'open');
}
});
Then apply class to div
<div class="open general" data-status='open'> OPEN</div>
The problem is that the event handler bound to HTML element. In this case with the <div> No with the class close or open. For this reason, when you click on div only tigger the handler with alert("opne").
The solution is: Use only one handler and inside it put a 'if' stament. In pseudocode:
if class open
do someting
else if class close
do someting

Categories

Resources