사소한 JavaScript/부트 스트랩 드롭 다운 문제

Question

기본적으로 내가 가지고있는 것은 3 개의 드롭 다운 메뉴뿐입니다. 따라서 하나만 선택하면 활성화 된 것이므로 나머지는 활성 상태 여야합니다. 그래서 지금까지 내가 해왔 던 것은 장애 클래스를 추가했고 나머지는 나머지는 3 - 비활성화 된 상태에서 첫 번째 활성 클래스를 사용했습니다.

<div class="btn-group" id="firstId"> 
          <button class="btn btn-default dropdown-toggle" type="button" 
            data-toggle="dropdown"> 
           Store 
           <span class="caret"></span></button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a> 
           </li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="dropdown"> 
         <div class="btn-group" id="secondId"> 
          <button class="btn btn-default dropdown-toggle disabled" type="button" 
            data-toggle="dropdown"> 
           Catalog 
           <span class="caret"></span></button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="dropdown"> 
         <div class="btn-group" id="thirdId"> 
          <button class="btn btn-default dropdown-toggle disabled" type="button" 
            data-toggle="dropdown"> 
           Categories 
           <span class="caret"></span></button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a> 
           </li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="dropdown"> 
         <div class="btn-group" id="fourthId"> 
          <button class="btn btn-default dropdown-toggle disabled" type="button" 
            data-toggle="dropdown"> 
           Products 
           <span class="caret"></span></button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a> 
           </li> 
           <li role="presentation" class="divider"></li> 
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 

Answer 1

JQUERY

$('#firstId ul.dropdown-menu li').on('click',function(){ 
    $('.btn.btn-default.dropdown-toggle.disabled').removeClass('disabled'); 
    }); 

에 : 나는

$(document).ready(function() { 

     $('#Test #firstId .dropdown-menu li a').click(function() { 
      var selText = $(this).text(); 
      $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>') 
     }); 

     $('#Test #secondId .dropdown-menu li a').click(function() { 
      var selText = $(this).text(); 
      $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>') 
     }); 

     $('#Test #thirdId .dropdown-menu li a').click(function() { 
      var selText = $(this).text(); 
      $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>') 
     }); 
     $('#Test #fourthId .dropdown-menu li a').click(function() { 
      var selText = $(this).text(); 
      $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>') 
     }); 

    }); 

그리고 여기 내 드롭 다운되는 첫 번째 드롭 다운 메뉴에서 무언가를 선택하는 즉시이를 활성화하는 방법 - 내 질문은 먼저 비활성화 된 모든 클래스 찾기 및 비활성화 클래스 제거를 선택하십시오.

JSFIDDLE DEMO