如何使用一键禁用锚标签[重复]答案

【问题标题】：How to disable anchor tag using one click [duplicate]如何使用一键禁用锚标签[重复]
【发布时间】：2018-06-22 17:52:43
【问题描述】：

我正在使用 ul 有我的导航栏项目：

<ul  id="mainN" class="nanGroup" ng-show="lCntr.only == 'mainNav'">

    <li >
     <a class="btn btn-small btn-revert"ng-click="lCntr.profile()"></a>
    </li>

    <li>
     <a class="btn btn-small btn-revert"ng-click="lCntr.settings()"></a>
    </li>

    <li class="dropdown">
     <a class="btn btn-small btn-revert" ng-click="lCntr.logout()"></a>
    </li>
</ul>

并且我正在尝试通过使用此脚本使选定的（配置文件、设置、..）禁用：

    $(document).ready(function ($) {
     $('#mainN li a').on('click',function (event) {

     event.preventDefault();

     $(this).addClass('disabled');
     });
    });

这是有效的，但是如果我单击它两次并且我希望它在第一次单击时被禁用，我已经尝试过所有的东西，例如 ($(this).prop('disabled' ,true)) 有什么建议吗？？

【问题讨论】：

听起来你需要$(this).toggleClass('disabled')
使用真正的button 元素而不是锚点。然后你可以使用prop("disabled", true)。
为什么不在你的函数 lCntr 中设置类？

标签： javascript jquery html

【解决方案1】：

试试这样的：

$(document).ready(function($) {

  $('#mainN li a:not(.disabled)').on('click', function(event) {
    event.preventDefault();
    $(event.currentTarget).unbind("click");
    
    alert("Working");
    $(this).addClass('disabled');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainN" class="nanGroup" ng-show="lCntr.only == 'mainNav'">

  <li>
    <a class="btn btn-small btn-revert" ng-click="lCntr.profile()">One</a>
  </li>

  <li>
    <a class="btn btn-small btn-revert" ng-click="lCntr.settings()">Two</a>
  </li>

  <li class="dropdown">
    <a class="btn btn-small btn-revert" ng-click="lCntr.logout()">Three</a>
  </li>

【讨论】：

【解决方案2】：

添加一个禁用的类并从您的 jQuery 选择器中删除任何禁用的链接：

$(document).ready(function ($) {
     $(document).on('click', "#mainN li a:not(.disabled)", function (event) {
        console.log("do an action here: " + $(this).attr("ng-click"));
        $(this).addClass('disabled');
     });
});

.btn {
  display:inline-block;
  padding:3px 5px;
  background-color:blue;
  color:White;
  cursor:pointer;
  margin  2px
}
.btn.disabled {
  color:#121212;
  background-color:lightgray
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul  id="mainN" class="nanGroup" ng-show="lCntr.only == 'mainNav'">
    <li >
     <a class="btn btn-small btn-revert" ng-click="lCntr.profile()">Profile</a>
    </li>

    <li>
     <a class="btn btn-small btn-revert" ng-click="lCntr.settings()">Settings</a>
    </li>

    <li class="dropdown">
     <a class="btn btn-small btn-revert" ng-click="lCntr.logout()">Logout</a>
    </li>
</ul>

【讨论】：