Question

我正在使用ul的Nav bar项目：

<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））的事情。任何建议??

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

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

如何一键禁用锚标签

2 个答案: