Twitter bootstrap 带引导3的Yii2复选框组

如何在yii2中创建

这就是我们需要的

<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>

复选框1（预选中）
复选框2
复选框3

这就是我所拥有的

<?
    $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),
        ],
    ]);
?>

---

我需要在代码中添加什么才能生成该标记？

按钮组无法使用自动生成的复选框，因为Yi2添加了div和错误的帮助块。因此，您可以创建一个隐藏表单，并通过jQuery将按钮组连接到它。我已经创建了您需要的代码，并在我的yii设置中运行。您只需将

替换为您的型号名称即可

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

---

我的变体。我使用标准的yii radiobox和自定义模板

<?= $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');
?>

请看一下

你可以做一些像这样的事情

带或不带$form和$model

从2.0.6版开始提供