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

【问题标题】：jQuery - disable and enable an anchor tag based on conditionjQuery - 根据条件禁用和启用锚标记
【发布时间】：2017-03-27 17:18:59
【问题描述】：

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

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

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

}

【问题讨论】：

请参考：stackoverflow.com/questions/10996435/… 和 stackoverflow.com/questions/1164635/… 希望对您有所帮助。
status 是一个 jQuery 对象，它永远不会评估为 'Registered'

标签： javascript jquery html

【解决方案1】：

基于 CSS 的替代方案是

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

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

【讨论】：

【解决方案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();
    });
}

【讨论】：

一个 jQuery 实例永远不会等于字符串“Registered”。附言我没有投反对票。
没有投反对票，我什至无缘无故得到了一个，但 status 是一个 jQuery 对象。
我猜他不喜欢点击事件的位置
ps +1 但请先放置点击事件，然后执行 if 语句并在点击时创建 var（或只是在那里分配一个值）
@HusseinNazzal OP 在页面加载时检查它，所以我们不会点击事件。

【解决方案3】：

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

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

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

检查here。

【讨论】：

我不认为这是最好的方法......防止默认会更好
实际上你需要将'status'设置为一些字符串，如果在这里引用对象，我想说的另一件事是没有必要阻止默认操作，因为没有登录如果我们只是删除 href 属性，因此即使单击它也不会发生任何操作

【解决方案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>");

【讨论】：

【解决方案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);

【讨论】：

【解决方案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;
    }
});

【讨论】：

HTMLAnchorElement 没有名为“已禁用”的属性。
@rink.attendant.6 感谢您让我知道。我已经更新了代码。
您正在阻止默认操作，为什么要返回布尔值 FALSE？
而@rink 评论的原因可以在这里找到：stackoverflow.com/a/10729215/601179
我使用 disabled 属性使其工作如下： var status = $('#status').text(); if (status == 'Registered') { $('#addLink').attr("disabled",true); } else{ $('#addLink').attr("disabled",false); }