Contactform7でチェックボックスにBootstrap4のボタンデザインを適用する

Contactform7でチェックボックスにBootstrap4のボタンデザインを適用する場合に２時間くらいハマったのでメモ。

https://getbootstrap.com/docs/4.4/components/buttons/#checkbox-and-radio-buttons

まずは完成形。

Contactform7でのフォームに入力

<div class="form-group">
   <label class="col control-label">チェックボックス</label>
      <div class="col">
        [checkbox naiyo use_label_element "チェックボックス1" "チェックボックス2" "チェックボックス3"]
      </div>
</div>

Javascriptに追加
ボタン（.btn-secondary、.btn-success）はお好きなものに。

  $('.wpcf7-checkbox > .wpcf7-list-item, .wpcf7-radio > .wpcf7-list-item')
    .addClass('btn-group-toggle')
    .attr('data-toggle', 'buttons');
  $('.wpcf7-form input[type=checkbox], .wpcf7-form input[type=radio]')
    .closest('label')
    .addClass('btn btn-secondary');
  $('label.btn.active')
    .removeClass('btn-secondary')
    .addClass('btn-success');
  $('.wpcf7-list-item-label').on('click', function () {
    if ($(this).parent().hasClass('active')) {
       $(this).parent().removeClass('active');
    } else {
      $(this).parent().addClass('active');
    }
  });

ハマった理由は、Contactform7ではラベルのテキストがスパンで囲まれているのだが、
そうすると、テキスト部分（.wpcf7-list-item-label）がクリックで反応してくれない。外周部分は反応する。
まず、テキスト部分だけが反応しないことがわからなかった。

<div class="form-group">
  <label class="col control-label">チェックボックス</label>
  <div class="col">
    <span class="wpcf7-form-control-wrap naiyo">
      <span class="wpcf7-form-control wpcf7-checkbox">
        <span class="wpcf7-list-item first btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary">
            <input type="checkbox" name="naiyo[]" value="チェックボックス1">
            <span class="wpcf7-list-item-label">チェックボックス1</span>
          </label>
        </span>
        <span class="wpcf7-list-item btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary">
            <input type="checkbox" name="naiyo[]" value="チェックボックス2">
            <span class="wpcf7-list-item-label">チェックボックス2</span>
          </label>
        </span>
        <span class="wpcf7-list-item last btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary">
            <input type="checkbox" name="naiyo[]" value="チェックボックス3">
            <span class="wpcf7-list-item-label">チェックボックス3</span>
          </label>
        </span>
      </span>
    </span>
  </div>
</div>

テキスト部分をクリックしても、ボタンを押した場合と同じようにactiveが付与されるようにする。

  $('.wpcf7-list-item-label').on('click', function () {
    if ($(this).parent().hasClass('active')) {
       $(this).parent().removeClass('active');
    } else {
      $(this).parent().addClass('active');
    }
  });