带有bootstrap 3的Yii2复选框组

Question

如何在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>

这就是我所拥有的

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

按钮组无法与自动生成的复选框一起使用，因为 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);
?>