Toggle disable/enable links
Question
I'm trying to get a toggle disable/enable script to be applied on links so that if a link is clicked it would be disabled and re-enabled once a another link is clicked.
To check for disabled links, I am using an alert, which ideally when disabled wouldn't fire.
I am working with :
$('body').on('click', 'a.disabled', function (event) {
event.preventDefault();
});
jQuery.fn.extend({
disable: function (state) {
return this.each(function () {
var $this = $(this);
$this.toggleClass('disabled', state);
});
}
});
// Disabled with:
$('a').disable(true);
// Enabled with:
$('a').disable(false);
$('.link_1').click(function () {
alert('link_1 clicked');
});
$('.link_2').click(function () {
alert('link_2 clicked');
});
And have set up JS Bin
3 answers
solution1
1 2015-08-07 06:41:03
You could use this handler to do same
$('body').on('click', 'a, function (event) {
$('a.disabled').removeClass('disabled');
$(this).addClass('disabled');
});
solution2
0 2015-08-07 06:46:49
I have added a links class to catch all links, when any of these links is clicked, enable all links and disable the clicked one.
$(document).ready(function () { jQuery.fn.extend({ disable: function (state) { return this.each(function () { var $this = $(this); if ($this.is('input, button')) this.disabled = state; else $this.toggleClass('disabled',state); }); } }); $('.links').click(function (event) { event.preventDefault(); if(!$(this).hasClass('disabled')) { alert($(this).attr('class').split(' ')[0] + ' clicked'); } $('.links').disable(false); $(this).disable(true); }); });
.disabled { color :red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="link_1 links">My Link1</a> <a class="link_2 links">My Link2</a> <a class="link_3 links">My Link3</a>
solution3
0 2015-08-08 05:47:31
Try this
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("a").click(function(){ $("a.togle").toggle(); }); }); </script> </head> <body> <a class="togle">This is a paragraph 1 .</a></br> <hr> <a >Toggle between hide() and show()</a> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.