如果选中复选框，只允许点击链接

我想设置一个按钮/链接，只有在选中复选框时才可点击。所以到目前为止我的代码将如果选中复选框，只允许点击链接

<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。由于

来源

2013-04-26 user2325103

我们不能Ë从初学者开始一个开始？ – 2013-04-26 19:20:10

如果有人访问你的页面，但是**不是使用Javascript，该怎么办？你如何阻止他们点击链接？ – 2013-04-26 19:22:28

@Kacey如果这是一个关于渐进式增强的问题该怎么办？ – 2013-04-26 19:37:33

<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'; 
}

来源

2013-04-26 19:26:48

该代码添加一些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>

的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/

来源

2013-04-26 19:31:42

有多种方法可以完成此任务。大多数较新的方法可能会涉及jQuery。

首先，包括jQuery的（谷歌工程）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

然后，做链接，而不是一个链接：

<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>

来源

2013-04-26 19:31:51

所以你建议在请求中添加30kb +以切换锚点？ – 2013-04-26 19:39:02

是和不是。可能性是，如果编写大量的javascript，并且使用Google托管，大多数人已经缓存了该库，这将有助于长期运行。但你是对的，它不是最节省空间的解决方案。 – 2013-04-26 19:40:09

关于CDN的好处。这取决于情况，通常当一些标签JS作为他们正在寻找Native解决方案的问题时。我还建议考虑原始海报对技术的适应性，如果他们在切换复选框时遇到问题，那么jquery目前可能会失去其技术能力。 – 2013-04-26 19:42:37

下面是使用纯javascript实现它的一种简单方法，使用一些ID属性作为javascrip的钩子添加t document.getElementById()功能。

HTML：

<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>

的Javascript：

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

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

WORKING EXAMPLE

来源

2013-04-26 19:44:38

如果选中复选框，只允许点击链接

回答

相关问题