Question

如何在yii2中创建checkbox group？

这就是我们需要的

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

这就是我拥有的

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

我需要在代码中添加什么来生成降价？

Answer 1

我的变种。我使用标准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');
?>

My result

Answer 2

按钮组不能使用自动生成的复选框，因为yii2会添加div和帮助块以查找错误。所以你可以做的是创建一个隐藏的表单，并通过jQuery将按钮组连接到它。我已经创建了你需要的代码，并在我的yii设置中使用它。您需要做的就是将<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

请看一下Class yii\bootstrap\ToggleButtonGroup

您可以做类似的事情

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

带有或不带有$ form和$ model

从2.0.6版本开始可用

带有bootstrap 3的Yii2复选框组

3 个答案: