無効ブートストラップアクティブラベルをクリック

Question

私は3つのボタンを選択していくつかのグループを持っています。誰かがN/Aボタンを選択すると、他の2つのボタンが無効になるようにしています。 N/Aボタンが選択解除されると、他の2つのボタンが有効になります。私はそれが私のマシン上で動作している、他の2つのボタンが無効として色付けされ、 "無効"属性が適切に設定されている。問題は、ボタン/ラベルをクリックして、ラベルをアクティブに設定できることです。

JSFiddleを私のマシンと同じように動作させるのに問題があります。最初のN/Aクリックで他の2つのボタンを無効にすることはありませんが、JSFiddleを使用している可能性があります。あなたは自分のマシン上でそれを試してみたい場合は、ここに私のコードは、次のとおりです。

https://jsfiddle.net/trout0525/huz8macm/7/

<div id="plan-wrapper"> 
    <div class="row plan-title-row"> 
     <div class="col-lg-6" id="plan-title"> 
      Loading... 
     </div> 
     <div class="col-lg-6"> 
      <div class="pull-right" id="countdown"> 
       Countdown 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <div class="panel panel-default" style="margin-bottom: 4px;"> 
       <div class="panel-body"> 
        <div class="row" id="master-progress"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="plan-file-title" style="margin: 0 0 4px 5px;"></div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <ul class="nav nav-tabs"> 
       <li role="presentation" class="active"><a data-toggle="tab" href="#planTeam">Team</a></li> 
       <li role="presentation" class=""><a data-toggle="tab" href="#planResources">Resources</a></li> 
       <li role="presentation" class=""><a data-toggle="tab" href="#planStatus">Status</a></li> 
      </ul> 
      <div class="tab-content" style="background-color: white; padding: 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;"> 
       <div id="planTeam" class="tab-pane fade in active"> 
       </div> 
       <div id="planResources" class="tab-pane fade"> 
       </div> 
       <div id="planStatus" class="tab-pane fade"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

すべてのヘルプは素晴らしいことです。

Answer 1

それは、開発者コンソールからタイプミスとデバッグの除去とJSFiddleで行われ、まだそれはクロームではなく、IEで現在のGot：

https://jsfiddle.net/trout0525/huz8macm/9/

$(".btn-group .btn").on('click', function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    var $selectedButton = $(this), 
     $panelDefault = $selectedButton.closest('.panel-default'), 
     $controlPanel = $panelDefault.find('.panel-heading .pull-right'), 
     parent = $selectedButton.closest('.panel-default').attr('data-stepId'), 
     stepId = $selectedButton.closest('li').attr('id'), 
     spcStat = $selectedButton.attr('id').match(/^(.*?)\d+$/)[1]; 

    var buttonIsActive = $selectedButton.hasClass('active'), 
     buttonIsDisabled = $selectedButton.attr('disabled'); 

    if (buttonIsActive || buttonIsDisabled) { 
     $selectedButton.removeClass('active'); 
    } else { 
     $selectedButton.addClass('active'); 
    } 

    if ($selectedButton.hasClass('not-applicable')) { 
     var naIsActive = $selectedButton.hasClass('active'), 
      allButtons = $selectedButton.closest('.btn-group'); 

     if (naIsActive) { 
      $selectedButton.siblings().removeClass('active'); 
      $(allButtons) 
       .find('.btn_draft_complete') 
       .attr('disabled', 'disabled') 
       .attr('title', 'Disabled. To enable: deselect N/A for this substep') 
       .find('input') 
       .css('point-events', 'auto'); 
      $(allButtons) 
       .find('.btn_done') 
       .attr('disabled', 'disabled') 
       .attr('title', 'Disabled. To enable: deselect N/A for this substep') 
       .find('input') 
       .css('point-events', 'auto'); 
     } else { 
      $(allButtons) 
       .find('.btn_draft_complete') 
       .removeAttr('disabled') 
       .attr('title', 'Mark step as Draft Complete') 
       .find('input') 
       .removeAttr('disabled') 
      $(allButtons) 
       .find('.btn_done') 
       .removeAttr('disabled') 
       .attr('title', 'Mark step as Draft Complete') 
       .find('input') 
       .removeAttr('disabled') 
     } 
    } 
});