yii2 将 css 类动态应用于复选框选项答案

【问题标题】：yii2 applying css class dynamically to checkbox optionsyii2 将 css 类动态应用于复选框选项
【发布时间】：2019-09-25 13:07:51
【问题描述】：

我想将 css 类应用于复选框列表选项。

我的代码中有这个：

<?= $form->field($searchModel, 'colour')
->checkboxList(ArrayHelper::map(app\modules\admin\models\ShoeColour::find()->all(), 'id', 'colour'), 
([ 'itemOptions'=>['class'=>'my-own-custom-class']])) ?>

生成的html是这样的：

<div class="form-group field-productsearch-colour">
<label class="control-label">Colour</label>
<input type="hidden" name="ProductSearch[colour]" value=""><div id="productsearch-colour"><label><input type="checkbox" class="my-own-custom-class" name="ProductSearch[colour][]" value="1"> Red</label>
<label><input type="checkbox" class="my-own-custom-class" name="ProductSearch[colour][]" value="2"> Blue</label>
<label><input type="checkbox" class="my-own-custom-class" name="ProductSearch[colour][]" value="3"> Pink</label>
<label><input type="checkbox" class="my-own-custom-class" name="ProductSearch[colour][]" value="4"> Black</label>
<label><input type="checkbox" class="my-own-custom-class" name="ProductSearch[colour][]" value="5"> Brown</label>
<label><input type="checkbox" class="my-own-custom-class" name="ProductSearch[colour][]" value="6"> Grey</label>
<label><input type="checkbox" class="my-own-custom-class" name="ProductSearch[colour][]" value="7"> White</label></div>

<div class="help-block"></div>
</div>

我在我的表中有 shoe_color - 列作为每种颜色的 css_class，我想为每种颜色应用 css 类，但不知道如何实现。

喜欢而不是my-own-custom-class 我想要class-1、class-2 等等。

【问题讨论】：

尝试阅读此https://stackoverflow.com/questions/27480061/yii2-checkboxlist-custom-class
已经读过了。无法弄清楚如何在活动形式中应用相同的内容，那么该示例也没有针对动态类进行详细说明。
接受的问题@Sfili_81 链接的答案中的第二个示例正是您想要的。它以相同的方式应用于活动表单。

标签： php css yii2

【解决方案1】：

您可以在循环中创建 HTML 标签：

    <div class="form-group field-productsearch-colour">
    <label class="control-label">Colour</label>
    <input type="hidden" name="ProductSearch[colour]" value="">
    <div id="productsearch-colour">
        <?php 
        $i = 1;
        foreach () { ?>
          <label><input type="checkbox" class="class-<?= $i ?>" name="ProductSearch[colour][]" value="1"> Red</label>
       <?php $i++;
       } ?>
    </div>

在 foreach 循环中，您可以遍历模型的所有元素。

【讨论】：

【解决方案2】：

我认为@Sfili_81 和@Michal Hynčica 已经向您展示了您正在寻找的东西。您必须在配置中使用item，而不是使用itemOptions，并带有closure：

<?php
//  **** ONLY FOR TEST ****
use \yii\helpers\Html;
use \yii\widgets\ActiveForm;


class ProductSearch extends \yii\base\Model {
    public $colour;
}

$searchModel = new ProductSearch;
$colors = [
    1 => 'Red',
    2 => 'Blue',
    3 => 'Pink',
    4 => 'Black',
    5 => 'Brown',
    6 => 'Grey',
    7 => 'White'
];
$form = ActiveForm::begin([]);
// END **** ONLY FOR TEST ****

echo $form->field($searchModel, 'colour')->checkboxList($colors, ['item'=> function($index, $label, $name, $checked, $value){
    return Html::checkbox($name, $checked, [
        'value' => $value,
        'label' => $label,
        'class' => 'class-' . ($index + 1), // <--------
    ]);
}]);

结果

<div class="form-group field-productsearch-colour">
    <label class="control-label">Colour</label>
    <input type="hidden" name="ProductSearch[colour]" value=""><div id="productsearch-colour"><label><input type="checkbox" class="class-1" name="ProductSearch[colour][]" value="1"> Red</label>
        <label><input type="checkbox" class="class-2" name="ProductSearch[colour][]" value="2"> Blue</label>
        <label><input type="checkbox" class="class-3" name="ProductSearch[colour][]" value="3"> Pink</label>
        <label><input type="checkbox" class="class-4" name="ProductSearch[colour][]" value="4"> Black</label>
        <label><input type="checkbox" class="class-5" name="ProductSearch[colour][]" value="5"> Brown</label>
        <label><input type="checkbox" class="class-6" name="ProductSearch[colour][]" value="6"> Grey</label>
        <label><input type="checkbox" class="class-7" name="ProductSearch[colour][]" value="7"> White</label></div>
    <div class="help-block"></div>
</div>

See screenshot

【讨论】：