JQuery отключить ссылку


284

Кто-нибудь знает, как отключить ссылку в jquery БЕЗ использования return false;?

В частности, я пытаюсь отключить ссылку на элемент, щелкнув по нему с помощью jquery, который вызывает некоторые вещи, а затем повторно включить эту ссылку, чтобы при повторном нажатии она работала по умолчанию.

Спасибо. Дейв

ОБНОВЛЕНИЕ Вот код. Что нужно сделать после того, как .expandedкласс был применен, - это снова включить отключенную ссылку.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});

7
Почему требование не использовать return false? Используйте его, а затем удалите обработчик событий, когда он больше не применяется (или поместите в него условие для возврата различных значений в зависимости от состояния упомянутых «некоторых вещей»).
Квентин

Вы просто пытаетесь выполнить некоторую предварительную обработку, прежде чем перейти по ссылке на одно и то же действие щелчка? то есть вы предлагаете не два клика, а ссылку пользователя, некоторые действия происходят, ссылка идет?
Лазарь

В противном случае, вы можете объяснить, почему вы используете этот подход, поскольку лучшее понимание проблемного пространства улучшит ответы.
Лазарь

@lazarus, я предлагаю 2 клика по той же ссылке. 1, чтобы сделать что-то сначала, затем 2, чтобы рассматривать ссылку как ссылку.
davebowker

@ daviddorward, до сих пор я пытался вернуть false, и это продолжается до второй части моей цели, то есть не позволяя пройти 2-му клику. Если бы вы могли написать короткий пример, я был бы очень признателен.
davebowker

Ответы:


364
$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

Это предотвратит поведение гиперссылки по умолчанию, которая заключается в посещении указанного href.

Из учебника jQuery :

Для щелчка и большинства других событий вы можете предотвратить поведение по умолчанию (здесь, по ссылке на jquery.com), вызвав event.preventDefault () в обработчике событий.

Если вы хотите, чтобы preventDefault()выполнялось только определенное условие (например, что-то скрыто), вы можете проверить видимость вашего ul с расширенным классом . Если она видна (то есть не скрыта), ссылка должна срабатывать как обычно, поскольку оператор if не будет введен, и, следовательно, поведение по умолчанию не будет предотвращено:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});

3
С jQuery 1.7+ вы можете использовать вкл / выкл: stackoverflow.com/questions/209029/…
Лэнс Кливленд

если он имеет href и onclick, это будет работать $ ("# myLink"). attr ('onclick', '') .click (function (e) {e.preventDefault ();});
Рональд Макдональд

реализованный с помощью ajax и jquery, я могу спрятать покупку с обратным вызовом, чтобы не дать скребкам получить эти ссылки. Огромное спасибо!
Цезарь Белих

в этом посте проще всего использовать bootstrap , надеюсь, поможет.
Шайют

107

Попробуй это:

$("a").removeAttr('href');

РЕДАКТИРОВАТЬ-

Из вашего обновленного кода:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);

3
Играть с href очень приятно, потому что это быстрый способ отключить ссылку, которая выполняет действие через событие onclick. Очень очень Умно!
daitangio

приятный способ не дать браузеру добавить # в URI при выполненииhref="#"
Abela

65

Для других, кто пришел сюда через Google, как я - вот другой подход:

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

Помните: не только это класс CSS

класс = "ButtonStyle"

но и эти два

class = "Buttonstyle отключен"

так что вы можете легко добавлять и удалять другие классы с помощью jQuery. Не нужно трогать href ...

Я люблю JQuery! ;-)


2
это предполагает, что ссылка не имеет цели :)
dstarh

2
Вместо того, чтобы делать всю эту причудливость, почему бы просто не поднять клик выше в домене, использовать on()для фильтрации всех a.disabledссылок и предотвращения дефолта. Тогда все, что вам нужно сделать, это включить / выключить отключенный класс, и ссылка будет работать сама по себе, когда «включена».
CodeChimp

Нет необходимости в «== true» - addClass («отключен») будет работать независимо. if(disabledCondition)
Фокс Уилсон

1
@fwilson, хотя вы совершенно правы, для начинающего программиста это легче понять с помощью == true. :)
карменизм

Есть какая-то конкретная причина, чтобы не упрощать это if ($(this).hasClass('disabled')) { e.preventDefault(); }?
Мир

58

Вот альтернативное решение css / jQuery, которое я предпочитаю для краткости и минимизации сценариев:

CSS:

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

JQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});

7
Из Mozilla : «Предупреждение. Использование событий указателя в CSS для элементов, отличных от SVG, является экспериментальным. Эта функция была частью проекта спецификации CSS3 UI, но из-за многих открытых проблем была отложена до CSS4».
маркеры дуэлянтов

1
Это хорошее соображение, но оно хорошо работает в большинстве современных браузеров.
Питер ДеВиз

Возможно, вы захотите рассмотреть цепочки .prop("tabindex", "-1");послеaddClass
Олег Гришко

19

Вы можете удалить клик для ссылки, следуя;

$('#link-id').unbind('click');

Вы можете снова включить ссылку, выполнив следующие действия:

$('#link-id').bind('click');

Вы не можете использовать свойство «отключен» для ссылок.


1
Легко включать и выключать по сравнению с другими.
python1981

2
Msgstr "Вы не можете использовать свойство" отключено "для ссылок." Интересно, почему нет согласованности между кнопкой и ссылкой для отключения. «Отключено» должно работать и для ссылки. Это все равно что сказать, что для автомобиля Chevy вы должны нажать педаль тормоза, чтобы остановиться, но для этого другого производителя автомобилей вы должны использовать этот рычаг, расположенный на крыше.
eaglei22

14

Если вы идете по маршруту HREF, вы можете сохранить его

Отключить:

$('a').each(function(){
    $(this).data("href", $(this).attr("href")).removeAttr("href");
});

Затем включите снова:

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

В одном случае мне пришлось сделать это таким образом, потому что события щелчка уже были связаны где-то еще, и я не мог их контролировать.


12

Я всегда использую это в JQuery для отключения ссылок

$("form a").attr("disabled", "disabled");

Вы также можете использовать, $("form a").attr("disabled", false);чтобы включить его снова
Александр Рыхлицкий

9

Пример ссылки html:

        <!-- boostrap button + fontawesome icon -->
        <a class="btn btn-primary" id="BT_Download" target="blank" href="DownloadDoc?Id=32">
        <i class="icon-file-text icon-large"></i>
        Download Document
        </a>

использовать это в JQuery

    $('#BT_Download').attr('disabled',true);

добавить это к CSS:

    a[disabled="disabled"] {
        pointer-events: none;
    }

1
Я никогда раньше не сталкивался с этим свойством CSS, но для меня это самый простой способ отключения гиперссылки. Прелесть этого в том, что когда вы удаляете класс, который содержит pointer-events: noneсвойство из якорных элементов, они возвращаются к тому, что делали ранее при нажатии. Поэтому, если они были основными гиперссылками, они возвращаются к переходу по URL-адресу в своем hrefатрибуте, и если у них установлен обработчик события click, он снова становится активным. Гораздо проще, чем сохранять hrefзначения и обработчики кликов.
Филипп Стратфорд

Мне нравится это решение, оно самое простое.
Луис

Из горстки «решений», когда ничего не получалось (и почти отказывалось от этого маршрута), пришли к этому драгоценному камню . Это решение без суеты. И единственный, который действительно работает. Престижность.
user12379095

5

Моя любимая функция «оформить заказ, чтобы отредактировать элемент и предотвратить - дикие западные клики в любом месте - во время оформления заказа»

$('a').click(function(e) {
    var = $(this).attr('disabled');
    if (var === 'disabled') {
        e.preventDefault();
    }
});

Поэтому, если я хочу, чтобы все внешние ссылки на панели инструментов второго действия были отключены в режиме редактирования, как описано выше, я добавлю функцию редактирования

$('#actionToolbar .external').attr('disabled', true);

Пример ссылки после пожара:

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

И теперь вы можете использовать отключенное свойство для ссылок

Ура!


3

Вы должны найти ответ здесь .

Спасибо @Will и @Matt за это элегантное решение.

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});

3

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

$(link).hide();
$(link).show();

2

Просто включите вещи, установите флаг и верните false. Если флаг установлен - ничего не делать.


Попробовал это, установив класс, затем вызвав этот класс позже, но вернув false, переносит и предотвращает вызов ссылки.
davebowker

1

unbind()устарел jQuery 3, используйте off()метод вместо:

$("a").off("click");

0

Я знаю, что это не с jQuery, но вы можете отключить ссылку с помощью простого CSS:

a[disabled] {
  z-index: -1;
}

HTML будет выглядеть так

<a disabled="disabled" href="/start">Take Survey</a>

0

Это работает для ссылок, которые имеют встроенный атрибут onclick. Это также позволяет позже удалить «return false», чтобы включить его.

        //disable all links matching class
        $('.yourLinkClass').each(function(index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", "return false; " + OnClickValue);
        });

        //enable all edit links
        $('.yourLinkClass').each(function (index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", OnClickValue.replace("return false; ", ""));
        });

-2

Просто используйте $("a").prop("disabled", true);. Это действительно отключит элемент de link. Должен быть prop("disabled", true). Не использоватьattr("disabled", true)

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.