Question

我试图在链接上应用切换禁用/启用脚本，以便在单击链接时，一旦单击另一个链接，它将被禁用并重新启用。

要检查已停用的链接，我正在使用提醒，理想情况下，禁用时不会触发。

我正在使用：

 $('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');

        });

并设置了JS Bin

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

Answer 1

您可以使用此处理程序执行相同的操作

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

Answer 2

我添加了一个链接类来捕获所有链接，当点击任何这些链接时，启用所有链接并禁用所点击的链接。

$(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>

Answer 3

试试这个

<!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>

切换禁用/启用链接

3 个答案: