How can i pass a custom css class in a generated checkbox List with Yii2 form field?

Question

As per question's title, I am strugling to pass a custom css class on each generated checkbox list using Yii2 form field.

Here is my function:

 public function getItems()
    {
        $items = [];
        
        foreach (explode("\n", $this->options) as $option) {
            if (strpos($option, '=>') !== false) {
                list($key, $value) = explode('=>', $option);
                $items[trim($key)] = Yii::t($this->propertyField->language_category, trim($value));
            } else {
                $items[] = Yii::t($this->propertyField->language_category, trim($option));
            }
        }

        return $items;
    }

As it is now i get this list:

<div class="form-group field-propertyfields">
<label class="form-label">Property Amenities</label>
<div id="propertyfields-7" class="multiselect-checkboxes">
<label><input type="checkbox" name="propertyFields[7][]" value="1">Elevator</label>
<label><input type="checkbox" name="propertyFields[7][]" value="2">Parking</label>
<label><input type="checkbox" name="propertyFields[7][]" value="3">Fireplace</label>
</div>  
</div>

What i want is to add a custom class on each label of input so it look like this:

<label class="my-custom-class"><input type="checkbox" name="propertyFields[7][]"value="2">Parking</label>

Here is how i render checkbox list:

public function getList($form, $model, $searchAttribute, $options = [])
    {

    $options['class'] = 'multiselect-checkboxes';        
    $formName = "{$searchAttribute}[{$this->propertyField->id}]";
   
    return $form->field($model, $formName)->checkboxList($this->getItems(), $options)->label($this->propertyField->getFieldTitle());
    }

Is your checkbox list generated by you or from users? You don't need this kind of logic for normal forms. — Insane Skull, Mar 18 '22 at 13:18
its generated by me. The check boxes are a list that i use as filters in my search form. — Designer, Mar 18 '22 at 13:18
then when you write label element write your custom class too. i don't see your use case with this logic if it's predefined form. Add code for how you render checkbox list from `$items` — Insane Skull, Mar 18 '22 at 13:19
@InsaneSkull I updated the code in my question and added the function i use to render the checkbox list. — Designer, Mar 18 '22 at 13:34
Check the accepted answer in this question https://stackoverflow.com/questions/63939208/how-to-add-different-and-common-classes-in-radiolist-in-yii2 checkboxList works in same way. — Michal Hynčica, Mar 18 '22 at 13:48

Kandarp Patel · Answer 1 · 2022-03-22T10:38:42.027

$options['class'] = 'multiselect-checkboxes';

add one more array in your options variable - 'itemOptions'.

$options['itemOptions'] = ['class'=>'your class name for checkbox inputs'];

this will add your class on all checkbox inputs, further to add custom class on labels add 'labelOptions' to 'itemOptions'

$options['itemOptions']['labelOptions'] = ['class'=>'your class name for checkbox labels'];

Ref-https://www.yiiframework.com/doc/api/2.0/yii-widgets-activefield#checkboxList()-detail

further check the activeCheckboxList options

score 0 · Answer 2 · answered Mar 18 '22 at 10:00

0

add it in your view file using jquery like this

$(".multiselect-checkboxes").children('label').addClass("my-custom-class");

answered Mar 18 '22 at 10:00

Leenard

63
1
8

Yep that's an option but I would prefer to go with php – Designer Mar 18 '22 at 10:03
...and why are people still assuming that everyone uses/want to use jQuery? – M. Eriksson Mar 18 '22 at 10:04
why don't you go for yii2 checkbox list? you can add your custom class and other attributes as well https://forum.yiiframework.com/t/how-to-work-with-checkboxlist/80792 – Leenard Mar 18 '22 at 10:08

How can i pass a custom css class in a generated checkbox List with Yii2 form field?

2 Answers2