如果選中複選框，只允許點擊鏈接

我想設置一個按鈕/鏈接，只有在選中複選框時纔可點擊。所以到目前爲止我的代碼將如果選中複選框，只允許點擊鏈接

<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

如果選中複選框，只允許點擊鏈接

回答

相關問題