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

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

// 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 отключить ссылку

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

a.disabled { color:gray; }

Затем, когда я хочу отключить ссылку, я вызываю

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

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

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

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

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

$(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"); 
    });
});

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

Я думаю, что более приятным решением является установка атрибута disabled data и привязка проверки для него при нажатии. Таким образом, мы можем временно отключить привязку до тех пор, пока, например, 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/

Неправильный выбранный ответ.

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

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

Простое добавление атрибута disabled к привязке выполнит свою работу, если у вас есть глобальное правило CSS, подобное следующему:

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

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

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

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

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

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

$('#divID').addClass('disabledAnchor');

В файле css

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

Это так же просто, как return false;

ex.

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

or

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

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

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

Если вы пытаетесь заблокировать любое взаимодействие со страницей, возможно, стоит взглянуть на плагин jQuery BlockUI

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

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

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

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

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

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

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

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

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

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

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

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

<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 строки) и семантически правильно (потому что сейчас нам не нужна ссылка, поэтому не должно быть ссылки)

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

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

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