yii2 applying css class dynamically to checkbox options

Question

I want to apply css class to checkbox-list options.

I have this in my code:

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

and the generated html is like this:

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

I have in my table shoe_color - column as css_class for each color and I want to apply the css class for each, not able to make out how I can achieve that.

like instead of my-own-custom-class I want to have class-1,class-2 and so on.

try to read this https://stackoverflow.com/questions/27480061/yii2-checkboxlist-custom-class — law_81
– law_81, Commented Sep 25, 2019 at 13:58
already read it. cannot make out how to apply the same in active-form, then there also the example doesn't elaborate for dynamic class. — Joshi
– Joshi, Commented Sep 25, 2019 at 13:59
The second example in accepted answer of the question @Sfili_81 linked does exactly what you want. It's applied same way to active form. — Michal Hynčica
– Michal Hynčica, Commented Sep 25, 2019 at 14:35

Daniel R · Accepted Answer · 2019-09-25 14:32:12Z

0

You can create HTML tags inside a loop:

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

Inside foreach loop you can go through all the elements of your model.

answered Sep 25, 2019 at 14:32

Daniel R

271 silver badge8 bronze badges

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

Comments

Francesco Simeoli · Accepted Answer · 2019-09-25 21:57:56Z

I think @Sfili_81 and @Michal Hynčica have shown you exactly what you are looking for. Instead of using itemOptions, you must use item in the configuration with a 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), // <--------
    ]);
}]);

RESULT

<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

Collectives™ on Stack Overflow

yii2 applying css class dynamically to checkbox options

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related