ブートストラップ：label.btnのチェックボックスがオンの場合、変更イベントが機能していません。

Question

私はブートストラップV3.3を持っていると私はボタンとしてスタイル次checkbox ES持っている：

のjQueryを使用して

 <div class="btn-group transactionSheetToolbarStatusToggle" data-toggle="buttons"> 
      <label class="transactionSheetToolbarShowDraft btn btn-default active"> 
       <input type="checkbox" autocomplete="off" checked="checked">Draft 
      </label> 
      <label class="transactionSheetToolbarShowFinalised btn btn-default active"> 
       <input type="checkbox" autocomplete="off" checked="checked">Finalised 
      </label> 
      <label class="transactionSheetToolbarShowVoid btn btn-default"> 
       <input type="checkbox" autocomplete="off">Voided 
      </label> 
     </div> 

を、私は、チェックボックスのイベントを取得問題を抱えているように見えます。

私が試してみました：

$('.transactionSheetToolbarShowDraft input[type="checkbox"]').change(function() {...}); 

を、イベントがトリガされていたことを思えません。私も試してみました

：

$('.transactionSheetToolbarShowDraft input[type="checkbox"]').click(function() {...}); 

しかし、再び、それはイベントがトリガされていたことを思えません。 はその後、私はこれがあります。

$('.transactionSheetToolbarShowDraft').click(function() {...}); 

イベントがトリガが、間違って何かがあるように思われたが... 問題は、私はcheckboxの:checkedステータスを取得しようとしたときに表示されます。

$('.transactionSheetToolbarShowDraft').click(function() { 
    var checkbox = $(this).find('input[type="checkbox"]'); 
    if (checkbox.is(':checked')) { 
     console.log('is checked!'); 
    } else { 
     console.log('not checked...'); 
    } 
}); 

:checkedステータスが反対のようです！私はいくつかのデバッグを行い、問題を追跡しました。この背景には、labelがクリックされ、そのclickイベントが発生したため、checkboxはまだ更新されていません。基本的にchangeイベントハンドラが、checkboxがチェックされた状態を更新する前に呼び出されました。 は絶望的なので、私は以下のハックを思い付いた：

$('.transactionSheetToolbarShowDraft').click(function() { 
    var checkbox = $(this).find('input[type="checkbox"]'); 
    setTimeout(function() { 
     if (checkbox.is(':checked')) { 
      console.log('is checked!'); 
     } else { 
      console.log('not checked...'); 
     } 
    }, 10); 
}); 

これは、イベントを処理するsetTimeout calll持つことを除いて...動作しているようですが、それは間違いなく良い方法ではありません。

誰かがこれに対してより良い解決策を持っているかどうかを確認したいだけですか？または私は何か間違っているのですか？

Answer 1

これにより、チェック済み/未チェックのイベントが発生します。

$('.transactionSheetToolbarShowDraft').on('click','input',function() { 
 
    var checkStatus = ($('input').prop('checked'))? 'is checked!': 'not checked...'; 
 
    console.log(checkStatus); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn-group transactionSheetToolbarStatusToggle" data-toggle="buttons"> 
 
      <label class="transactionSheetToolbarShowDraft btn btn-default active"> 
 
       <input type="checkbox" autocomplete="off" checked="checked">Draft 
 
      </label> 
 
      <label class="transactionSheetToolbarShowFinalised btn btn-default active"> 
 
       <input type="checkbox" autocomplete="off" checked="checked">Finalised 
 
      </label> 
 
      <label class="transactionSheetToolbarShowVoid btn btn-default"> 
 
       <input type="checkbox" autocomplete="off">Voided 
 
      </label> 
 
     </div>