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

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

a.disabled { color:gray; }

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

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

Затем в обработчике click для тега 'thelink' я всегда проверяю первую вещь

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

Ответ 3

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

Похож:

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

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

Ответ 4

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

Ответ 5

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

});

Ответ 6

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

ех.

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

или

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

Ответ 7

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

В файле css

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

Ответ 8

Выбранный ответ не является хорошим.

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

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

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

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

Ответ 9

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

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

Ответ 10

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

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

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

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

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

Ответ 11

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

Ответ 12

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

Сначала вы хотите выяснить, как установить значение для отказа, для этого вы бы использовали JQuery Attribute Functions, и функция происходит на event, например click, или загрузка документа.

Ответ 13

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

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

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

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

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

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

Ответ 14

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

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

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

Ответ 15

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

<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>")

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

Ответ 16

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

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

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