javascript - jQuery - 根据条件禁用和启用锚标记

Question

在页面加载时，我正在检查是否有人注册。如果他是，我将启用一个链接，否则禁用该链接。

我尝试了以下方法，但它不起作用。

var status = $('#status');
if (status == 'Registered'){
    $('#addlink').data('disabled');
} 
else {

}

Answer 1

基于 CSS 的替代方案是

$('#addlink').css('pointer-events', 'none');

CanIUse 报告称，截至 2017 年初，该功能的支持率为 94%。

Answer 2

使用event.preventDefault来防止锚标签工作。

anchor标签不会在添加属性时禁用disabled

var status = $('#status').text(); // get text value if it's is span/div/p etc
if (status == 'Registered') {
    $('#addlink').click(function (e) {
        e.preventDefault();
    });
} 

Answer 3

试试这个，如果用户已注册，则通过添加 href 来启用链接，如果没有，则通过删除 href 属性来禁用。

只需在执行此代码之前将其设置status为一些。string

var href = $('#addlink').attr('href');
if(status == 'Registered'){
    $('#addlink').attr('href', href);
} else{
    $('#addlink').removeAttr('href');
}

在这里检查。

Answer 4

如果你真的想删除链接，你可以使用 jquery unwrap 方法。

$("yourlinkselector").contents().unwrap();

这将删除链接。要再次添加它，您可能必须将链接文本放入跨度中，为其命名并使用 .wrap 将其包裹在您的内容周围。

工作示例可以在这里找到：http: //jsfiddle.net/Elak/hrvPj/2/

// remove the link
$(".link").contents().unwrap().wrap("<span class='oldLink'></span>")

// add the link again and remove the temp span
$(".oldLink").contents().unwrap().wrap("<a href='#'></a>");

Answer 5

你为什么不使用 javascript:void(0) ？

<a href="javascript:void(0)"> Link </a>

像

var href = 'javascript:void(0)';

var status = $('#status').val();  // ??
if (status == 'Registered'){
    href = 'available link';
}

$('#addlink').attr('href',href);

Answer 6

var status = $('#status').val(); //Not sure if it is a value/text
$('#addlink').on('click', function (e) {
    if (status == 'Registered') {
        e.preventDefault(); // prevent the default action of anchor tag
        return false;
    }
});