Javascript 仅当选中复选框时才允许单击链接

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

<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的初学者。谢谢

，单击此按钮即表示您同意向订单中添加订阅/定期产品

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

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


var check= document.getElementById('agreeCheckbox');
  if (check.checked){
    document.getElementById('mycheck').style.display='block';
  }
else{
 document.getElementById('mycheck').style.display='none';
}

var check=document.getElementById（'agreeCheckbox'）；
如果（勾选，勾选）{
document.getElementById（'mycheck'）.style.display='block'；
}
否则{
document.getElementById（'mycheck'）.style.display='none'；
}

单击此按钮即表示您同意向订单中添加订阅/定期产品

var check=document.getElementById（'agreeCheckbox'）；
如果（勾选，勾选）{
document.getElementById（'mycheck'）.style.display='block'；
}
否则{
document.getElementById（'mycheck'）.style.display='none'；
}

此代码向元素添加了一些

id

属性，为Javascript提供了一些挂钩。它隐藏并阻止锚定的默认操作，直到单击复选框

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>

工作示例

---

这段代码向元素添加了一些

id

属性，为Javascript提供了一些挂钩。它隐藏并阻止锚定的默认操作，直到单击复选框

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>

工作示例

---

有多种方法可以实现这一点。大多数较新的方法可能涉及jQuery

首先，包括jQuery（Google works）：

然后，创建链接，而不是链接：

<div id="mylink">This link is only clickable if checkbox is checked</div>

只有选中复选框时，此链接才可单击

接下来，如果单击该框，则使其可单击：

<script type="text/javascript">
$("input[name = 'agreeCheckbox']").click(function(){
  $("#mylink").html('<a href="exmaple.com">This link is only clickable if checkbox is checked</a>');
});
</script>

$（“输入[名称='agreeCheckbox']）。单击（函数（）{
$（“#mylink”）.html（“”）；
});

实现这一点的方法有很多种。大多数较新的方法可能涉及jQuery

首先，包括jQuery（Google works）：

然后，创建链接，而不是链接：

<div id="mylink">This link is only clickable if checkbox is checked</div>

只有选中复选框时，此链接才可单击

接下来，如果单击该框，则使其可单击：

<script type="text/javascript">
$("input[name = 'agreeCheckbox']").click(function(){
  $("#mylink").html('<a href="exmaple.com">This link is only clickable if checkbox is checked</a>');
});
</script>

$（“输入[名称='agreeCheckbox']）。单击（函数（）{
$（“#mylink”）.html（“”）；
});

这里有一个使用纯javascript的简单方法，使用我添加的一些ID属性作为javascript

document.getElementById（）函数的挂钩

HTML:

这里有一个使用纯javascript的简单方法，使用我添加的一些ID属性作为javascript
document.getElementById（）函数的挂钩

<form>
    <p><input type="checkbox" id="agreeCheckbox" name="agreeCheckbox" value="agreeCheckbox" onchange="toggleLink(this);">By clicking this you agree that you are adding a subscription/recurring product to your order</p>
</form>

<p><a href="exmaple.com" id="agreeLink" style="display:none;">This link is only clickable if checkbox is checked</a></p>

function toggleLink(checkBox)
{
    var link = document.getElementById("agreeLink");

    if (checkBox.checked)
        link.style.display = "inline";
    else
        link.style.display = "none";
}

HTML:

我们难道不能期待初学者有一个开始吗？如果有人访问您的页面时没有使用Javascript怎么办？你将如何阻止他们点击链接？@Kacey如果这是一个关于渐进增强的问题怎么办？@KevinBowersox很可能是这样。我只是好奇。难道我们不能期待一个初学者开始吗？如果有人访问你的页面而没有使用Javascript呢？你将如何阻止他们点击链接？@Kacey如果这是一个关于渐进增强的问题怎么办？@KevinBowersox很可能是这样。我只是好奇。所以你建议在请求中添加30kb+以切换锚？是和否。很可能，从长远来看，如果编写大量javascript，并且使用Google托管，大多数人已经缓存了库，这会有所帮助。但你是对的，它不是最节省空间的解决方案。CDN的优点是。这取决于具体情况，通常当一些标签作为问题时，他们正在寻找本机解决方案。我还建议考虑一下原始海报对该技术的舒适度，如果他们在切换复选框时遇到问题，jquery此时可能已经超出了他们的技术能力。很高兴知道。StackOverflow是新手（无论如何都要回答），所以我会记住这一点。谢谢。所以你建议在请求中添加30kb+以切换锚？是和否。很可能，从长远来看，如果编写大量javascript，并且使用Google托管，大多数人已经缓存了库，这会有所帮助。但你是对的，它不是最节省空间的解决方案。CDN的优点是。这取决于具体情况，通常当一些标签作为问题时，他们正在寻找本机解决方案。我还建议考虑一下原始海报对该技术的舒适度，如果他们在切换复选框时遇到问题，jquery此时可能已经超出了他们的技术能力。很高兴知道。StackOverflow是新手（无论如何都要回答），所以我会记住这一点。谢谢
<form>
    <p><input type="checkbox" id="agreeCheckbox" name="agreeCheckbox" value="agreeCheckbox" onchange="toggleLink(this);">By clicking this you agree that you are adding a subscription/recurring product to your order</p>
</form>

<p><a href="exmaple.com" id="agreeLink" style="display:none;">This link is only clickable if checkbox is checked</a></p>

function toggleLink(checkBox)
{
    var link = document.getElementById("agreeLink");

    if (checkBox.checked)
        link.style.display = "inline";
    else
        link.style.display = "none";
}