Як увімкнути або відключити якір за допомогою 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");

Це так просто, як повернути помилкове;

колишній

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, просто x-ing тегу href - це все, що вам потрібно зробити, тому рішення - це чистий HTML!

Інші рішення без остаточного jQuery, які зберігають 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 рядки), а також семантично правильно (оскільки нам зараз не потрібне посилання, тому не повинно бути посилання)

Вимкнути або увімкнути будь-який елемент із відключеним властивістю.

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

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