Deactive bootstrap active label click

我有幾組選擇三個按鈕。我試圖做到這一點，當有人選擇N/A按鈕時，它會禁用其他兩個按鈕。當N/A按鈕被取消選擇時，另外兩個按鈕被啓用。我讓它在我的機器上工作，其他兩個按鈕的顏色被禁用，並且正確設置了「禁用」屬性。問題是，仍然可以點擊按鈕/標籤並將標籤設置爲活動狀態。Deactive bootstrap active label click

我無法讓我的JSFiddle在我的機器上運行。它不會禁用初始N/A點擊中的其他兩個按鈕，但它可能只是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>

任何幫助將是巨大的。

來源

2016-09-06 Matthew Dewell

你能在小提琴儘量減少代碼只什麼需要嗎？ –

對不起。有一些額外的JavaScript變量和for循環，不需要在那裏。這裏是： https://jsfiddle.net/trout0525/huz8macm/8/ –

注：我只在這裏包括堆棧溢出的HTML代碼，但JSFiddle有一些JS和CSS，我認爲這不適合在這個帖子。 –

了它的jsfiddle完成與去除錯別字和調試通過開發者控制檯，但目前使用Chrome，而不是IE是：

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') 
     } 
    } 
});

來源

2016-09-07 16:06:17

Deactive bootstrap active label click

回答

相關問題