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
– Insane Skull, Commented Mar 18, 2022 at 13:18
its generated by me. The check boxes are a list that i use as filters in my search form. — Designer
– Designer, Commented Mar 18, 2022 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
– Insane Skull, Commented Mar 18, 2022 at 13:19
Check the accepted answer in this question stackoverflow.com/questions/63939208/… checkboxList works in same way. — Michal Hynčica
– Michal Hynčica, Commented Mar 18, 2022 at 13:48

Kandarp Patel · Accepted Answer · 2022-03-22 10:38:42Z

1

$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

edited Mar 22, 2022 at 10:38

answered Mar 21, 2022 at 12:55

Kandarp Patel

1,02010 silver badges22 bronze badges

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

Comments

Leenard · Accepted Answer · 2022-03-18 10:00:54Z

0

add it in your view file using jquery like this

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

answered Mar 18, 2022 at 10:00

Leenard

631 silver badge8 bronze badges

3 Comments

Designer Over a year ago

Yep that's an option but I would prefer to go with php

M. Eriksson Over a year ago

...and why are people still assuming that everyone uses/want to use jQuery?

Leenard Over a year ago

why don't you go for yii2 checkbox list? you can add your custom class and other attributes as well forum.yiiframework.com/t/how-to-work-with-checkboxlist/80792

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related