當已切換一行時，jQuery禁用表行切換

Question

我有一個表或文章，並且每行都有一個切換開關，用於顯示子行的內容。 在子行中，我還顯示Disqus評論。 這一切都很好，但是我不希望一次打開多行並且加載多個Disqus評論，從而減慢我的頁面速度。

我想在激活一個切換后禁用所有切換按鈕。 每個切換鏈接（類option_toggle）及其所在的行都有一個唯一的ID。 見下文。 如何通過JQuery完成此操作？

  //Hide main article table's options row $(document).ready(function() { $(".option_toggle").click(function(e) { e.preventDefault(); aid = $(this).attr('id'); //Determine if we are showing the comments or hiding the comments is_hidden = $(this).parent().parent().next(".options_row").is( ":hidden" ); if(is_hidden) { disqus_container = '#disqus_container_' + aid; jQuery('<div id="disqus_thread"></div>').insertBefore(disqus_container); $.ajax({ type: 'POST', url: 'http://www.example.com/disqus', data: {'msmm_tn' : '12d406df3c8b2e178893e2c146d318e5', 'aid' : aid}, dataType: 'json', success : function(data) { if (data) { $('#disqus_container_' + aid).html(data.script); DISQUS.reset({ reload: true, config: function () { this.page.url = 'http://www.example.com/#!'+ aid; this.page.remote_auth_s3 = data.payload; this.page.identifier = aid; this.page.api_key = "cULB96iURBu1pZOtLOOSVlVgBj10SY9ctXWiv0eiQdzhdxqBq9UgmVr5SeSiaFiP"; } }); } } }); } else { //Remove the comments $('#disqus_container_' + aid).prev('#disqus_thread').remove(); $('#disqus_container_' + aid).html(''); } $(this).parent().parent().next(".options_row").toggle("fast"); }); }); 

 <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

我想在激活一個切換后禁用所有切換按鈕。

$(".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：

a.disabled-link {
    cursor: default;
    color: #666;
    text-decoration: none;        
}