HTML- как отключить <a href>?

Я создал кнопку, которая при нажатии открывает модальное окно.

<a href="#"  data-toggle="modal" data-target="#myModal" class="signup-button gray-btn pl-pr-36" id="connectBtn"  data-role="disabled">Connect</a>

По какой-то причине data-role="disabled" не работает хорошо. Как я могу отключить это?

Ответы

Ответ 1

Вы можете использовать CSS для этого:

<a href="somelink.html" class="disabled">Some link</a>

.disabled {
   pointer-events: none;
   cursor: default;
}

Пример: http://jsfiddle.net/7EQJp/

Или вы можете использовать JavaScript, чтобы предотвратить действие по умолчанию, например:

 $('.disabled').click(function(e){
     e.preventDefault();
  })

Ответ 2

  Я создал кнопку...

Вот где вы ошиблись. Вы не создали кнопку, вы создали элемент привязки. Если бы вы использовали вместо этого элемент button, у вас не было бы этой проблемы:

<button type="button" data-toggle="modal" data-target="#myModal" data-role="disabled">
    Connect
</button>

Если вы собираетесь продолжать использовать элемент a, по крайней мере вы должны присвоить ему атрибут role, установленный на "button", и вообще удалить атрибут href:

<a role="button" ...>

Как только вы это сделаете, вы можете представить фрагмент JavaScript, который вызывает event.preventDefault() - здесь event будет вашим событием щелчка.

Ответ 3

.disabledLink.disabled {pointer-events:none;}

Это должно сделать это, надеюсь, я помог!

Ответ 4

<script>
    $(document).ready(function(){
        $('#connectBtn').click(function(e){
            e.preventDefault();
        })
    });
</script>

Это предотвратит действие по умолчанию.