bootstrapでinput-groupとbtn-groupを条件によって使い分ける

まずは、単体のinput-groupを試してみる。以下のコードで下のようなものができる。aaaaのボタンは切り替えよう。目標は、真ん中のInputFieldをボタンにかえる。

#test-area.input-group
  .input-group-btn.test-btn
    %button.btn.btn-success operator
  %input.form-control#test-input
  %button.btn.btn-info#test-set-value{style: "display: none;"} set value
  .input-group-btn.test-btn
    %button.btn.btn-success plus
%button.btn.btn-primary#change{ type: 'button' } aaaa

Coffeescriptを書いて、HideしていたButtonを真ん中のInputの代わりに出すようにする。基本は、input-group, input-group-btnと btn-groupを入れ替えるだけで済む

$ ->
  $('#change').on 'click', ->
    console.log 'click'
    $('#test-input').toggle()
    $('.test-btn').toggleClass 'input-group-btn'
    $('#test-area').toggleClass 'input-group'
    $('#test-area').toggleClass 'btn-group'
    $('.test-btn').toggleClass 'btn-group'
    $('#test-set-value').toggle()

このClassの付け外しを行わないと以下のように真ん中のボタンが中途半端な位置に来てしまう。