Yii2 checkbox group with bootstrap 3

Question

How to create checkbox group in yii2?

That's 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>

That's 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 I need to add in my code, to generate that markdown?

Nikolay Shayahmetov · Accepted Answer · 2016-01-03 06:43:10Z

1

My variant. I used standard yii radiobox and customize 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

answered Jan 3, 2016 at 6:43

Nikolay Shayahmetov

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Michael St Clair · Accepted Answer · 2015-11-11 18:43:56Z

The button group won't work with the auto generated checkboxes because yii2 adds divs and the help block for errors. So what you can do is create a hidden form and connect the button group to it through jQuery. I have created the code you would need and got it working in my yii setup. All you need to do is replace <model name> with the name of your model.

<?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);
?>

Gianpaolo Scrigna · Accepted Answer · 2019-05-20 10:36:49Z

0

Please take a look to Class yii\bootstrap\ToggleButtonGroup

You can do somethink like

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

with or without $form and $model

Available since version 2.0.6

answered May 20, 2019 at 10:36

Gianpaolo Scrigna

8827 silver badges25 bronze badges

Collectives™ on Stack Overflow

Yii2 checkbox group with bootstrap 3

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related