时间戳

首页 > 解决方案 > Achor 标签在刷新后禁用和启用

html - Achor 标签在刷新后禁用和启用

问题描述

ajax 调用成功后，我必须禁用 acnhor 标签。我试过
如何在 jquery 中禁用锚标记？ https://forum.jquery.com/topic/how-to-disable-a-tag-links-in-jquery 如何使用 jQuery 启用或禁用锚点？ jQuery - 根据条件禁用和启用锚标记

没有任何效果。这是我的代码

<div class="container col-md-offset-1">
        
            <div class="row-fluid top-space-20">
                <table id="table" class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>role</th>
                            <th>status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        <tr>
                            <td>{{using the each for loop }}</td>
                            <td><a id="deleteId" class="href-link" href="/goto" }}">{{
                                   my_data}}</a>
                            </td>
                           
                        </tr>
                       
                    </tbody>
                </table>
                
    <script>
        // Remove button event trigger
        $('#confirmdeletemodal').on('shown.bs.modal', function (e) {
            var triggeringElement = $(e.relatedTarget);
            $(this).find('#remove-button').attr('href', $(e.relatedTarget).data('href'));
            var modal = $(this)
            modal.find('.modal-body').text('Are you sure you wish to delete this ' + triggeringElement.data("jobrole") + ' data? ')
            $("#remove-button").on('click', function () {
                var jobid = triggeringElement.data('href');
                $.ajax({
                    type: 'POST',
                    url: '/delete',
                    data: { 'id': $(e.relatedTarget).data('href') },
                    success: function (data) {
                        console.log("Inside");
                        $("#deleteId").addClass('not-active').removeAttr("href");
                        var msg = "The role deleted is ";
                        $('#myModal').modal('show');
                        $('#myModal .modal-body p').html(msg);
                        console.log("outside");


                    }
                })

            })
        })

    </script>

我在表中列出一组数据。执行此 ajax 操作后，我必须禁用表中显示的锚点。我该怎么做

标签： htmljqueryhyperlinkanchor

解决方案

您可以添加禁用的类pointer-events-

样本 -

$('#button').on('click', function() {
  $('a.link').addClass('disable-click');
});
.disable-click {
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>role</th>
      <th>status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>M</td>
      <td>P</td>
      <td><a id="deleteId" class="link" href="https://www.google.com">LINK</a></td>
    </tr>
  </tbody>
</table>
<button id="button">
Disable
</button>

推荐阅读