Element group Yii2 with bootstrap 3

Question

How to create a group of checkboxes in yii2?

What we need

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 2 </label> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off"> Checkbox 3 </label> </div> 

What i have

 <? $options = ['uncheck'=>0]; echo ButtonGroup::widget([ 'options' => [ 'data-toggle' => 'buttons' ], 'buttons' => [ $form->field($model, 'field1')->checkbox($options), $form->field($model, 'field2')->checkbox($options), $form->field($model, 'field3')->checkbox($options), ], ]); ?> 

What do I need to add to my code to generate this markdown?

Answer 1

My version. I used the standard yii radobox and set up the template.

 <?= $form->field($model, 'attribute')->radioList( [ 1 => 'Enabled', 2 => 'Disabled' ], [ 'item' => function ($index, $label, $name, $checked, $value) { if ($value==1) $class_btn = 'btn-success'; // Style for enable else $class_btn = 'btn-default'; // Style for disable if ($checked) $class_btn = $class_btn.' active'; // Style for checked button return '<label class="btn '. $class_btn.'">' . Html::radio($name, $checked, ['value' => $value]) . $label . '</label>'; }, 'class' => 'btn-group', "data-toggle"=>"buttons", // Bootstrap class for Button Group ] )->label('Some label'); ?> 

My result

Answer 2

A button group will not work with automatically generated checkboxes because yii2 adds a div and a help box for errors. So what you can do is create a hidden form and associate a group of buttons with it through jQuery. I created the code you need and made it work in my yii installation. All you have to do is replace <model name> with your model name.

 <?php use yii\bootstrap\ButtonGroup; use yii\bootstrap\ActiveForm; use yii\web\View; ?> <?= ButtonGroup::widget([ 'buttons' => [ ['label' => 'Checkbox 1', 'options'=>['class'=>'btn btn-primary', 'id'=>'button1', 'autocomplete'=>'off', 'aria-pressed'=>'false']], ['label' => 'Checkbox 2', 'options'=>['class'=>'btn btn-primary', 'id'=>'button2', 'autocomplete'=>'off', 'aria-pressed'=>'false']], ['label' => 'Checkbox 3', 'options'=>['class'=>'btn btn-primary', 'id'=>'button3', 'autocomplete'=>'off', 'aria-pressed'=>'false']], ] ]); ?> <?php $form = ActiveForm::begin(); ?> <?= $form->field($model, 'field1')->hiddenInput()->label(false) ?> <?= $form->field($model, 'field2')->hiddenInput()->label(false) ?> <?= $form->field($model, 'field3')->hiddenInput()->label(false) ?> <?php ActiveForm::end();?> <?php $script = <<< JS if($('#<model name>-field1').val()=='1'){ $('#button1').addClass('active'); $('#button1').attr('aria-pressed', 'true'); } if($('#<model name>-field2').val()=='1'){ $('#button2').addClass('active'); $('#button2').attr('aria-pressed', 'true'); } if($('#<model name>-field3').val()=='1'){ $('#button3').addClass('active'); $('#button3').attr('aria-pressed', 'true'); } $('.btn').on('click', function () { $(this).button('toggle') $(this).blur(); }); $('#button1').on('click', function () { if($('#button1').attr('aria-pressed')== 'true'){ $('#<model name>-field1').val('1') } else { $('#<model name>-field1').val('0') } }); $('#button2').on('click', function () { if($('#button2').attr('aria-pressed')== 'true'){ $('#<model name>-field2').val('1') } else { $('#<model name>-field2').val('0') } }); $('#button3').on('click', function () { if($('#button3').attr('aria-pressed')== 'true'){ $('#<model name>-field3').val('1') } else { $('#<model name>-field3').val('0') } }); JS; $this->registerJs($script, View::POS_END); ?> 

Answer 3

Please look at Class yii \ bootstrap \ ToggleButtonGroup

You can do something like

 <?= $form->field($model, 'item_id')->widget(\yii\bootstrap\ToggleButtonGroup::classname(), [ // configure additional widget properties here ]) ?> 

with or without $ form and $ model

Available from version 2.0.6