Как отключить кнопку ссылки на щелчке переключателя в asp. net c#, используя jquery / javascript - PullRequest
Новая
       43

Как отключить кнопку ссылки на щелчке переключателя в asp. net c#, используя jquery / javascript

0 голосов
/ 23 января 2020 

  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>

ТРЕБОВАНИЕ:

Я хочу отключить кнопку btnFour , когда я нажимаю первый переключатель (т. е. со значением one ). Если я нажму оставшиеся две радиокнопки, я хочу отключить первые три кнопки, кроме последней.

Это не работает так, как я хочу. Если я беру простые кнопки HTML, то это работает, но не работает в случае LinkButtons. Любая помощь будет высоко ценится.

Спасибо.

1 Ответ

1 голос
/ 23 января 2020

Вы можете попробовать код ниже, просто передайте значение переключателя при вызове функции отключения и включите или отключите соответствующие кнопки

Фрагмент кода 

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