プログラミング

[解決]CakePHPのCheckboxはBootstrap4では動きません!!!

[解決]CakePHPのCheckboxはBootstrap4では動きません!!!

そうなんです!
Cakephp4では複数でも一つでもBootstrap4を当てると動きません。don't work..can't workなんですよ。

なぜなら、Cakephpのチェックボックスではlabelとinputがテレコになって出力されるからです!←ここまで4時間

下記はOK

<div class="custom-control custom-checkbox">
   <input type="checkbox" class="custom-control-input" id="checkmeout0">
   <label class="custom-control-label" for="checkmeout0">Check me out !</label>
</div>

これはNG 動きません!

<div class="custom-control custom-checkbox mb-3">
  <label class="custom-control-label" for="checkmeout2">
   <input type="checkbox" class="custom-control-input" id="checkmeout2">
   エラーだよerror!</label>
 </div>

チェックができない(外すこともできない)んです

Cakephpから出力されるのは、後者なので、Bootstrapでは動きません。

それでどうするか??

長くなるので、解決策を載せます。

 

<?= $this->Form->control('tags._ids', [
      'multiple' => 'checkbox',
      'hiddenField' => false,
      'label' => false,
       'options' => $tags,
        'value'=>$tagAry,
        'class' => 'custom-control-input',
        'templates' => [
              'inputContainer' => '{{content}}',
             'checkboxWrapper' => '<div class="custom-control custom-checkbox">{{label}}</div>',
             'nestingLabel' => "{{input}}<label class='custom-control-label'{{attrs}} >{{text}}</label>"],

    ]); ?>

ポイントは、templatesです!

'inputContainer' => '{{content}}' でhiddenを無くし、

'checkboxWrapper' => '<div class="custom-control custom-checkbox">{{label}}</div>'

これでwrapする。

そして、そして、これでテレコの解消だ!!!

'nestingLabel' => "{{input}}<label class='custom-control-label'{{attrs}} >{{text}}</label>"],

ここまでで2日間、、何してたんだろう。。。

ちなみに、チェックボックスは「2つ表示」していると、動きません!

そう、仮に正しく動く、ソースでも、画面上のチェックボックスが2つあると動きません。

同じ、id(input)とfor(label)があると動きません。

これでIt's work!!ですよ、皆さん。

 

-プログラミング

© 2022 青い空とコーヒーと