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

Question

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

Answer 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 disable a link

Answer 2

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

}); 

Answer 3

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

Answer 4

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

Во-первых, вы хотите, чтобы выяснить, как установить значение отключено, для этого нужно использовать JQuery's Attribute Functions, и есть, что функция произойдет на event, как click, или loading документа.

Answer 5

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

a.disabled { color:gray; } 

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

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

Затем в обработчик щелчка для «thelink» теге я всегда выполнять проверку первым делом

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

Answer 6

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

ex.

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

или

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

Answer 7

Я нашел ответ, который мне нравится намного лучше here

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

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

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

Answer 8

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

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

Answer 9

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

Answer 10

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

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

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

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

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

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

Answer 11

Попробуйте строки ниже

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

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

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

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

Answer 12

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

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

Answer 13

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

В CSS файл

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

Answer 14

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

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

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

Answer 15

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

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

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

Answer 16

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

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

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

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

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