JQueryが無効になっている行を1行切り替えたときにトグルする

Question

子行の内容を表示する各行に1つまたは複数の記事とトグルがあります。子行にはDisqusのコメントも表示されます。これはすべて正常に動作しますが、私は一度に複数の行を開く必要はなく、複数のDisqusのコメントはロードして、ページを遅くします。

トグルがアクティブになっているときに、すべてのトグルボタンを無効にしたいとします。各トグルリンク（クラスoption_toggle）とその行には一意のIDがあります。下記参照。これをJQuery経由でどのように実現できますか？

\t \t //Hide main article table's options row 
 
\t \t $(document).ready(function() { 
 
\t \t  $(".option_toggle").click(function(e) { 
 
\t \t  \t e.preventDefault(); 
 

 
\t \t  \t aid = $(this).attr('id'); 
 

 
\t \t  \t //Determine if we are showing the comments or hiding the comments 
 
\t \t  \t is_hidden = $(this).parent().parent().next(".options_row").is(":hidden"); 
 

 
\t \t  \t if(is_hidden) 
 
\t \t  \t { 
 
\t \t  \t \t disqus_container = '#disqus_container_' + aid; 
 

 
\t \t  \t \t jQuery('<div id="disqus_thread"></div>').insertBefore(disqus_container); 
 

 
\t \t \t \t \t $.ajax({ 
 
\t \t \t \t   type: 'POST', 
 
\t \t \t \t   url: 'http://www.example.com/disqus', 
 
\t \t \t \t   data: {'msmm_tn' : '12d406df3c8b2e178893e2c146d318e5', 'aid' : aid}, 
 
\t \t \t \t   dataType: 'json', 
 
\t \t \t \t   success : function(data) { 
 
\t \t \t \t    if (data) 
 
\t \t \t \t    { 
 
\t \t \t \t     \t \t $('#disqus_container_' + aid).html(data.script); 
 

 
\t \t \t \t     \t \t DISQUS.reset({ 
 
\t \t \t \t       \t reload: true, 
 
\t \t \t \t      \t config: function() { 
 
\t \t \t \t      \t   this.page.url = 'http://www.example.com/#!'+ aid; 
 
\t \t \t \t      \t   this.page.remote_auth_s3 = data.payload; 
 
\t \t \t \t      \t   this.page.identifier = aid; 
 
\t \t \t \t      \t   this.page.api_key = "cULB96iURBu1pZOtLOOSVlVgBj10SY9ctXWiv0eiQdzhdxqBq9UgmVr5SeSiaFiP"; 
 
\t \t \t \t      \t  } 
 
\t \t \t \t      }); 
 
\t \t \t \t    } 
 
\t \t \t    } 
 
\t \t \t   }); 
 
\t \t \t \t } 
 
\t \t \t \t else 
 
\t \t \t \t { 
 
\t \t \t \t \t //Remove the comments 
 
\t \t \t \t \t $('#disqus_container_' + aid).prev('#disqus_thread').remove(); 
 
\t \t \t \t \t $('#disqus_container_' + aid).html(''); 
 
\t \t \t \t } 
 

 
\t \t   $(this).parent().parent().next(".options_row").toggle("fast"); 
 
\t \t  }); 
 
\t \t }); 
 
\t \t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<tbody> 
 
    <tr class="main_row" data-id="ROWID428272"> 
 
    <td class="bkgcol-sunflower wht-border"> 
 
    <td> 
 
    <a id="428272" class="option_toggle" href="#" title="Ratings/Comments"> 
 
    </td> 
 
    <td class="key-title dark unpadded"> 
 
    <td class="artcl_info text-center">Scitech</td> 
 
    <td class="text-center" style="width:10px"> 
 
    <td class="text-center"> 
 
    </tr> 
 
    <tr class="options_row" style="display: table-row;"> 
 
    <td colspan="6"> 
 
    <div class="row article_options"> 
 
    <div class="row comments_row"> 
 
    <div id="comments" class="col-md-12"> 
 
    <div class="text-center article_title top_pad" style="width: 100%;">Comment on This Article</div> 
 
    <div id="disqus_thread"> 
 
    <div id="disqus_container_428272"> 
 
    </div> 
 
    </div> 
 
    </td> 
 
    </tr> 
 
    <tr class="main_row" data-id="ROWID427694">

Answer 1

私は1つのトグルが活性化されたとき、すべてのトグルボタンを無効にしたいです。

$(".option_toggle").click(function(e) { 
    e.preventDefault(); 

    // Remove click event handler defined above, and add a new one which prevents 
    // the click from doing anything 
    $(".option_toggle").off('click').on('click', function(e) { 
     e.preventDefault(); 
    }); 

    aid = $(this).attr('id'); 
    // Continue with rest of your code ... 
}); 

しかし、これはあなたが望むものは本当にありますか？これは、トグルをクリックすると他のものをクリックすることができないことを意味します。また、他のすべてのトグルはまだ、例えば無効なクラスとスタイルを追加し、多分あなたは、彼らがそのような無効か何かであることを示すためにスタイリングを更新する必要があり、リンクのように見えることを意味し：

Javascriptを：

$(".option_toggle").addClass('disabled-link'); 

CSS：