javascript - 如果选中复选框，则只允许单击链接

Question

我正在尝试设置一个按钮/链接，该按钮/链接只有在选中复选框时才可单击。所以到目前为止我的代码是

<form>
<input type="checkbox" name="agreeCheckbox" value="agreeCheckbox">By clicking this you agree that you are adding a subscription/recurring product to your order<br>
</form>

<a href="exmaple.com">This link is only clickable if checkbox is checked</a>

我假设我必须在 javascript 中执行此操作，尽管我是 javascript 的初学者。谢谢

Answer 1

此代码向元素添加了一些id 属性，以便为Javascript 提供一些钩子(Hook)。在单击复选框之前，它会隐藏并阻止 anchor 的默认操作。

HTML

<form>
<input id="agreement" type="checkbox" name="agreeCheckbox" value="agreeCheckbox">By clicking this you agree that you are adding a subscription/recurring product to your order<br>
</form>

<a href="exmaple.com" id="link">This link is only clickable if checkbox is checked</a>

Javascript

var chk = document.getElementById("agreement");
var anchor = document.getElementById("link");
anchor.style.display = "none";
anchor.onclick = function(e){
  e.preventDefault();
}

chk.onclick = function(){
    if(chk.checked){
        anchor.style.display = "inline";
      anchor.onclick = "";
    }
}

工作示例

http://jsfiddle.net/zVCD7/