如何使用 jquery/javascript 在 asp.net c# 中禁用單選按鈕上的鏈接按鈕單擊

Question

 function disableButtons(val) { if (val == 'clear') { $('#btnExcellent, #btnFine, #btnBad').prop('disabled', true); $('#btnSkip').prop('disabled', false); } else { $('#btnExcellent, #btnFine, #btnBad').removeProp('disabled'); $('#btnSkip').prop('disabled',true); } }

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <table id="radioBtnQueryQuality"> <tr> <td><input id="radioBtnQueryQuality_0" type="radio" name="radioBtnQueryQuality" value="clear" onclick="disableButtons(&#39;clear&#39;);" /><label for="radioBtnQueryQuality_0">One</label></td> </tr> <tr> <td><input id="radioBtnQueryQuality_1" type="radio" name="radioBtnQueryQuality" value="notExpNorImp" onclick="disableButtons(&#39;notExpNorImp&#39;);" /><label for="radioBtnQueryQuality_1">Two</label></td> </tr> <tr> <td><input id="radioBtnQueryQuality_2" type="radio" name="radioBtnQueryQuality" value="invalid" onclick="disableButtons(&#39;invalid&#39;);" /><label for="radioBtnQueryQuality_2">Three</label></td> </tr> </table> <a id="btnExcellent" class="btn btn-primary" href="javascript:__doPostBack(&#39;btnExcellent&#39;,&#39;&#39;)">Excellent</a> <a id="btnFine" class="btn btn-primary" href="javascript:__doPostBack(&#39;btnFine&#39;,&#39;&#39;)">Fine</a> <a id="btnBad" class="btn btn-primary" href="javascript:__doPostBack(&#39;btnBad&#39;,&#39;&#39;)">Bad</a> <a id="btnSkip" class="btn btn-primary" href="javascript:__doPostBack(&#39;btnSkip&#39;,&#39;&#39;)">Skip</a>

要求：

當我單擊第一個單選按鈕（即值為one ）時，我想禁用btnFour按鈕。 如果我單擊剩余的兩個單選按鈕，我希望除最后一個之外的前三個按鈕被禁用。

它不像我想要的那樣工作。 如果我采用簡單的 HTML 按鈕，那么它可以工作，但在 LinkBut​​tons 的情況下它不起作用。 任何幫助將非常感激。

謝謝你。

Answer 1

您可以嘗試下面的代碼，只需在調用禁用功能時傳遞單選按鈕的值並啟用或禁用相關按鈕

代碼片段

 function disableButtons(val) { if (val == 'clear') { $('#btnExcellent, #btnFine, #btnBad').addClass('disabled'); $('#btnSkip').removeClass('disabled'); } else { $('#btnExcellent, #btnFine, #btnBad').removeClass('disabled'); $('#btnSkip').addClass('disabled'); } $('a.disabled').each(function(){ var href = $(this).attr('href'); //console.log('attr = ' + href); $(this).data('href', href); $(this).attr('href', '#') }); $('a:not(.disabled)').each(function(){ var href = $(this).data('href'); //console.log('data = ' + href); if(href) { $(this).attr('href', href); } }); }

 a.disabled { opacity: 0.1; }

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <table id="radioBtnQueryQuality"> <tr> <td><input id="radioBtnQueryQuality_0" type="radio" name="radioBtnQueryQuality" value="clear" onclick="disableButtons(&#39;clear&#39;);" /><label for="radioBtnQueryQuality_0">One</label></td> </tr> <tr> <td><input id="radioBtnQueryQuality_1" type="radio" name="radioBtnQueryQuality" value="notExpNorImp" onclick="disableButtons(&#39;notExpNorImp&#39;);" /><label for="radioBtnQueryQuality_1">Two</label></td> </tr> <tr> <td><input id="radioBtnQueryQuality_2" type="radio" name="radioBtnQueryQuality" value="invalid" onclick="disableButtons(&#39;invalid&#39;);" /><label for="radioBtnQueryQuality_2">Three</label></td> </tr> </table> <a id="btnExcellent" class="btn btn-primary" href="javascript:__doPostBack(&#39;btnExcellent&#39;,&#39;&#39;)">Excellent</a> <a id="btnFine" class="btn btn-primary" href="javascript:__doPostBack(&#39;btnFine&#39;,&#39;&#39;)">Fine</a> <a id="btnBad" class="btn btn-primary" href="javascript:__doPostBack(&#39;btnBad&#39;,&#39;&#39;)">Bad</a> <a id="btnSkip" class="btn btn-primary" href="javascript:__doPostBack(&#39;btnSkip&#39;,&#39;&#39;)">Skip</a>