Question

I'm trying to create a site, on which you can download a file by pressing an button. The thing is, that I want people to click another button first to subscribe to a youtube channel and THEN to be able to download the file. So, I have to get rid of the disabled class on the download button after pressing the subscribe button. Here below is my code, what am I doing wrong?

EDIT: Tried all the answers now, none did work. I'm getting this error, what does that mean?

Uncaught ReferenceError: $ is not defined at index.html:23

Line 23 is

$('#sub').on('click',function(event){

$('#sub').on('click',function()){
  $('#dl').removeClass('disabled');
});

.disabled {opacity: 0.8; cursor: not-allowed;}
.size-3 {font-size: 16px;}
.btn {
  font: 100%/1.1 "Quicksand", sans-serif;
  background-color: rgba(0,0,0,0.3);
  border: 2.2px solid #ecf0f1;
  color: #ffffff;
  padding: 12px 62px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: none;
  font-size: 20px;
  margin: 3px 6.9px;
  cursor: pointer;
  transition-duration: 0.4s;
}

<a id="sub" href="#" class="btn size-3">Subscribe to ZERO</a>
<a id="dl" href="#" class="btn size-3 disabled">Download Exyther</a>

Answer 1

jsFiddle：https://jsfiddle.net/qrc3qm2e/

我添加了额外的代码来检查按钮是否不可点击，如果您需要jQuery答案，请点击此链接https://jsfiddle.net/qrc3qm2e/1/

的Javascript

var subElement = document.getElementById("sub");
var dlElement = document.getElementById("dl");
subElement.onclick = function(event)
{
    dlElement.classList.remove('disabled');
    dlElement.removeAttribute('disabled');
};

dlElement.onclick = function(event)
{
    if(dlElement.className.indexOf('disabled') > -1)
  {
    event.preventDefault();
    return;
  }
};

HTML

<a id="sub" href="#" target="blank" class="btn size-3">Subscribe to ZERO</a>
<a id="dl" href="#" target="blank" class="btn size-3 disabled" disabled="disabled">Download Exyther</a>

Answer 2

这会使您的代码出错：function())＆lt;＆lt;双关闭

正确的JS

$('#sub').on('click',function(event){
  event.preventDefault();
  $('#dl').removeClass('disabled');
});

Answer 3

您可以通过让您的示例非常简单来提供帮助。例如，我们不需要知道您的字体。：）

您可能希望使用disabled属性 - 或者使用CSS的那种AND样式。这是怎么做的。 - 如果你想使用一个链接 - 那么下载将是它的默认行为 - 所以你不应该阻止它 - 但是请参阅@JacobW＆＃39。你可能不想在标记中使用URL - 如果你真的试图阻止他们在订阅之前获取文件。如果您无法关闭链接按钮 - 并查看概念，我相信您会在以后的日期。 :)祝你好运！

JavaScript - 和已禁用的属性

https://jsfiddle.net/sheriffderek/3t0pn6gv/

标记

<button class='one'>one</button>
<button class='two' disabled>two</button>

式

button:disabled {
  opacity: .3;
}

脚本（不是@Canvas的jQuery）

var signupButton = document.querySelector('button.one');
var downloadButton = document.querySelector('button.two');

signupButton.addEventListener('click', function() {
    downloadButton.disabled = false;
});

与jQuery和CSS类 - （实际上没有禁用...但看起来如此）

https://jsfiddle.net/sheriffderek/wyx1od9g/

标记

<button class='one'>one</button>
<button class='two disabled'>two</button>

式

.disabled{
  opacity: .2;
}

脚本

$('button.one').on('click', function() {
  $('button.two').removeClass('disabled');
});

Answer 4

https://codepen.io/jacobweyer/pen/JNzgJE?editors=1111

这是问题的代码“

＆＃13;

$('#sub').on('click', function(event){
  if (event.preventDefault) {
    event.preventDefault();
  }
  
  $('#dl').removeClass('disabled');
});

＆＃13;

您没有关闭该功能，但您也可以在该功能中添加事件。这会将click事件传递给您的jquery。

通过单击事件，您可以通过阻止对标记的默认操作来阻止页面跳跃移动。

从<a> button after pressing another </a> <a> button

4 个答案:

JavaScript - 和已禁用的属性

与jQuery和CSS类 - （实际上没有禁用...但看起来如此）