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

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

Чтобы якорь не следовал указанному 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 отключить ссылку

Приложение, над которым я сейчас работаю, делает это в стиле 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"); 
    });
});

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

$("a").click(function(){
                alert('disabled');
                return false;

}); 

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

Простое добавление «отключенного» атрибута к якору сделает эту работу, если у вас есть глобальное правило 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");

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

ех.

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

или

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

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

В css файле

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

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

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

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

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

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

В ситуациях, когда вы должны поместить текстовый или 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

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

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

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

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

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