CODEWITHSUNDEEP
javascriptjqueryhtml
tuvboy
tuvboy

Reputation: 81

Toggle disable/enable links

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

https://jsbin.com/jatani/1/edit?html,js,output

Upvotes: 0

Views: 1074

Answers (3)

Kishan
Kishan

Reputation: 1190

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>

Upvotes: 0

KAD
KAD

Reputation: 11122

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>

Upvotes: 0

V-Development
V-Development

Reputation: 61

You could use this handler to do same

$('body').on('click', 'a, function (event) {
            $('a.disabled').removeClass('disabled');
            $(this).addClass('disabled');
        });

Upvotes: 1

Related Questions