使用Javascript/jQuery的複選框有條件的超級鏈接

我有一個使用JavaScript提交表單的超鏈接/圖像按鈕，使用Javascript/jQuery的複選框有條件的超級鏈接

<p> 
    <a href="#" onclick="checkOutFrm.submit();"> 
    <img src="images/btn-checkout-basket.gif" width="169" height="28" alt="Checkout" border="0" /> 
    </a> 
</p>

，並想添加一個複選框，直到它被選中，將禁用超鏈接。我會如何去做這件事？

任何幫助非常感謝，S.

來源

2010-11-22 ss888

您不能禁用的超級鏈接雖然你可以將其隱藏。 – Sarfraz 2010-11-22 13:33:08

@Sarfraz：你總是可以禁用鏈接... – 2010-11-22 13:34:20

你不應該，在一般：

混合你的JavaScript到您的HTML標記（你應該以編程方式附加邏輯處理程序），
（ab）僅對JavaScript使用錨元素（你應該使用一個按鈕，或將onclick處理程序的IMG直接），也不
發生在一個單一的元素的點擊表單的提交處理器（應該改爲處理onsubmit事件的形式）。

我不知道你的情況的細節，但我會做到這一點在你的HTML文件：

<!-- Put a valid doctype here --> 
<html><head> 
    <script type="text/javascript" src="submit.js"></script> 
</head><body> 
    <form id="myform" ...> 
    <label> 
     <input type="checkbox" name="accept" id="accept-box" /> 
     I accept 
    </label> 
    <button type="submit" id="submitter" disabled="disabled"> 
     <img src="..." /> 
    </button> 
    </form> 
</body></html>

...這在你的submit.js文件：

window.onload = function(){ 
    var accept = document.getElementById('accept-box'); 
    var submit = document.getElementById('submitter'); 
    accept.onclick=function(){ 
    submit.disabled = !accept.checked; 
    }; 
    document.getElementById('myform').onsubmit = function(){ 
    // Prevent form submission by any means unless 
    // the accept button is checked. 
    return accept.checked; 
    }; 
};

（嗯，其實，我個人會用jQuery來處理JS的東西:)

$(function(){ 
    $('#accept-box').click(function(){ 
    $('#submitter').attr('disabled',!this.checked); 
    }); 
    $('#myform').submit(function(){ 
    return $('#accept-box').attr('checked'); 
    }); 
});

您可以使用CSS樣式掉周圍的圖像按鈕，如果你喜歡：

#submitter { border:0; padding:0 }

來源

2010-11-22 14:02:19 Phrogz

這是輝煌的，許多，許多，非常感謝，S – ss888 2010-11-22 15:30:21

您可以使用jQuery驗證http://bassistance.de/jquery-plugins/jquery-plugin-validation/給力了。

來源

2010-11-22 13:34:06 Itamar

非常感謝你，s。 – ss888 2010-11-22 15:32:01

提交數據之前，您可以先檢查複選框的值。

<a href="javascript: if(getElementById('CheckBoxID').checked) { checkOutFrm.submit(); } else { return false; }">

如果你使用jQuery你寧願做這種方式：

$(function(){ 
    $("a").click(function(e){ 
     e.preventDefault(); 
     $("#CheckBoxID").val() && $("form").submit(); 
    }); 
});

來源

2010-11-22 13:36:03

非常感謝，但我不能得到它的工作，並最終使用Phrogz的建議。無論如何謝謝你，S. – ss888 2010-11-22 15:31:25

這段代碼可能不是100％正確的，但它的意思是指示你在正確的方向。 – 2010-11-22 16:04:11

使用Javascript/jQuery的複選框有條件的超級鏈接

回答

相關問題