为什么我的 jquery 按钮不能禁用

Question

如果用户当前在该页面上，我正在尝试禁用按钮，我知道有更有效的方法，但我正在练习我的 if, elses。

问题是我仍然可以点击链接，如果我点击它们并且我在同一页面上，两者都会刷新页面。我的代码：

$("#homepage").on("click", function(event) {
    if (window.location.href === 'index.html') {
        $(this).attr('disabled', "disabled");
        $(this).attr('disabled', true);
        event.preventDefault();
    }else {
        window.location.href = 'index.html';
    };
}); 
$("#aboutUs").on("click", function(event) {
    if (window.location.href === 'aboutus.html') {
        $(this).attr('disabled', "disabled");
        $(this).attr('disabled', true);
        event.preventDefault();
    }else {
        window.location.href = 'aboutus.html';
    };
});

Answer 1

验证 window.location.href 的值与

相同

$("#homepage").on("click", function(event) {
alert( window.location.href);
});

而不是将此值放在如下条件中：

if (window.location.href === 'dummyrul/index.html') {
                $(this).attr('disabled', "disabled");
                $(this).attr('disabled', true);
                event.preventDefault();
            }

Answer 2

实际上 window.location.href 会给你完整的 URL 比如：-

https://www.example.com/index.html

http://www.example.com/index.html

等等

这就是为什么您的 if 条件似乎永远不会变为真。

像下面这样使用indexOf():-

$("#homepage").on("click", function(event) {
    if (window.location.href.indexOf('index.html') >-1) {
            $(this).prop('disabled', true); // recomended to use `prop`
            event.preventDefault();
    }
    else {
        window.location.href = 'index.html';
    }
}); 
$("#aboutUs").on("click", function(event) {
    if (window.location.href.indexOf('aboutus.html')>-1) {
        $(this).prop('disabled', true);// recomended to use `prop`
        event.preventDefault();
    }
    else {
        window.location.href = 'aboutus.html';
    }
});

参考：-

indexOf() functionality

如果您只想禁用两个特定 URL 上的按钮，请在 console.log(window.location.href); 提供的 if 条件中使用完整路径。

为什么我的 jquery 按钮不能禁用

Why won't my jquery button disable

jquery

button

disable-link