Как включить или отключить привязку с помощью jQuery?


150

Как включить или отключить привязку с помощью jQuery?


Спасибо за ваш ответ, все еще он не работает, так что вы можете сделать так, чтобы он работал с функцией document.ready
Сентил Кумар Бхаскаран

Это может помочь, если вы разместите фрагмент кода, который не работает.
Ура, я помогаю

На самом деле моя кодировка находится в Rails, и моя кодировка <% = foo.add_associated_link ('Add email', @ project.email.build)%> когда я отображаю ее в браузере, я вижу письмо, но не могу отключить его, даже если я пробовал с кодировкой типа e.preventDefault (), но безрезультатно
Сентил Кумар Бхаскаран

Ответы:


194

Чтобы якорь не следовал указанному href, я бы предложил использовать preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

Видеть:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

Также посмотрите этот предыдущий вопрос о SO:

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


Я пытался с этими "attr" он работает только на элемент формы, а не на тег Anchor.
Сентил Кумар Бхаскаран

1
@senthil - предотвращение дефолта считается «правильным» способом сделать это, см. мое редактирование (ссылка на другой Q + A)
karim79

На самом деле моя кодировка находится в Rails, и моя кодировка <% = foo.add_associated_link ('Add email', @ project.email.build)%> когда я отображаю ее в браузере, я вижу письмо, но не могу отключить его, даже если я пробовал с кодировкой типа e.preventDefault (), но безрезультатно
Сентил Кумар Бхаскаран

2
как мне поменять местами $('a.something').on("click", function (e) { e.preventDefault(); });?
ス レ ッ ク ス

2
Не согласен, используйте CSS "pointer-events: none;" вместо этого, как и в других ответах.
Витрило

116

Приложение, над которым я сейчас работаю, делает это в стиле CSS в сочетании с javascript.

a.disabled { color:gray; }

Тогда всякий раз, когда я хочу отключить ссылку, я звоню

$('thelink').addClass('disabled');

Затем в обработчике кликов для тега thelink я всегда запускаю проверку первым делом.

if ($('thelink').hasClass('disabled')) return;

6
Разве в последней строке не должно быть сказано «return false»?
Prestaul

1
Хороший звонок, Престол. При привязке к тегу <a> я использую: <a href="whwhat" onclick="return disableLink(this)"> .. then: function disableLink (node) {if (dojo.hasClass (node, 'disabled') вернуть false; dojo.addClass (node, 'disabled'); вернуть true;} .. это позволяет щелкнуть ссылку один раз и выполнить действие (вернуть true), а после этого не разрешить действие (возвращает) ложь)
Neek

Обратите внимание, что в обработчике вы, вероятно, должны использовать $ (this) вместо $ ("thelink"), поскольку это может измениться, или пользователь может легко скопировать / вставить код.
Алексис Вилке

2
Предлагаю также добавить курсор: по умолчанию к отключенному стилю.
Стюарт Хэллоуз

40

Я нашел ответ, который мне больше нравится здесь

Выглядит так:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

Включение будет включать установку атрибута href

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Это создает впечатление, что элемент привязки становится обычным текстом, и наоборот.



12

Я думаю, что более удачное решение - включить отключенный атрибут данных и привязать его к щелчку. Таким образом, мы можем временно отключить привязку, пока, например, javascript не будет завершен с помощью вызова ajax или каких-либо вычислений. Если мы не отключим его, мы можем быстро щелкнуть его несколько раз, что нежелательно ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

Я сделал пример jsfiddle: http://jsfiddle.net/wgZ59/76/


11

Выбранный ответ не хорошо.

Используйте CSS-стиль указателя-события . (Как предложил Рашад Аннара)

См. MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Его поддерживают в большинстве браузеров.

Простое добавление «отключенного» атрибута к якору сделает эту работу, если у вас есть глобальное правило CSS, подобное следующему:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Также с событиями указателя вам не нужно включать состояние: hover, поскольку это событие указателя. Вам нужно только включить селектор [отключен].
Ларри Дюкек

10

Попробуйте следующие строки

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz, даже если вы отключите <a>тег hrefбудет работать, поэтому вы должны удалить hrefтакже.

Если вы хотите включить, попробуйте ниже линии

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

1
Это именно то, что мне было нужно при использовании JQuery с ASP.net MVC ActionLink. Спасибо!
eaglei22

8

Это так же просто, как вернуть false;

ех.

jQuery("li a:eq(0)").click(function(){
   return false;
})

или

jQuery("#menu a").click(function(){
   return false;
})


5
$("a").click(function(event) {
  event.preventDefault();
});

Если этот метод вызывается, действие по умолчанию для события не будет запущено.



4

Вы никогда не указывали, как вы хотите, чтобы они были отключены, или что может вызвать отключение.

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


1

В ситуациях, когда вы должны поместить текстовый или HTML-контент в тег привязки, но вы просто не хотите, чтобы при щелчке по этому элементу вообще выполнялось какое-либо действие (например, когда вы хотите, чтобы ссылка на страницу была отключена, потому что она текущая страница), просто вырежьте href. ;)

<a>3 (current page, I'm totally disabled!)</a>

Ответ @ michael-meadows подтолкнул меня к этому, но он все еще рассматривал сценарии, в которых вам все еще приходится работать с jQuery / JS. В этом случае, если у вас есть контроль над написанием самого html, все, что вам нужно сделать, это просто пометить тег href, так что решение будет чисто HTML!

Другие решения без jQuery finagling, которые сохраняют href, требуют, чтобы вы поместили # в href, но это заставит страницу отскочить наверх, и вы просто хотите, чтобы она была просто отключена. Или оставляя его пустым, но в зависимости от браузера, который все еще выполняет такие вещи, как прыжок наверх, и это недопустимый HTML в соответствии с IDE. Но, видимо,a тег является полностью допустимым HTML без HREF.

Наконец, вы можете сказать: хорошо, почему бы просто не сбросить тег вообще? Поскольку часто вы не можете этого сделать, этот aтег используется для стилизации в рамках CSS или в используемом вами элементе управления, например, в пагинаторе Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination


1

Таким образом, с комбинацией ответов выше, я придумал это.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

0

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

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

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

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

Таким образом, мы можем просто заменить тег привязки тегом div. Это намного проще (всего 2 строки) и семантически правильно (потому что нам сейчас не нужна ссылка, поэтому не должно быть ссылки)


0

Отключить или включить любой элемент со свойством disabled.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );

Почему за этот ответ проголосовали? Он отвечает на вопрос «Как включить или отключить привязку с помощью jQuery?»
RitchieD

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