Почему при нажатии на label не меняется состояние radiobutton?

Question

[Александр Степанов]

Хочу сделть красивые кнопки, но при нажатии на label ничего не происходит,хотя при наведении на label есть блик на radiobutton.
При нажатии на сам кружок все срабатывает, но для стилизации нужно нажатие именно на label.
Верстку взял с сайта bootstrap-а и там срабатывает при клике на label, а в чем у меня загвоздка - не пойму
Вывожу радио в цикле

<form class="form-inline" data-toggle="buttons" data-id="size" id="size">


                    <?php foreach ($product->sizes as $size): ?>

                        <div class="form-check">
                            <input class="form-check-input" name="size" type="radio" id="<?= $size->name ?>" value="<?= $size->name ?>" />
                            <label class="form-check-label" for="<?= $size->name ?>"><?= $size->name ?></label>
                        </div>

                    <?php endforeach; ?>

                </form>

Comments

[Михаил Р.]

Причем здесь тег-метка YII?

[Александр Степанов]

Mike Ro, при том, что не срабатывало именно в Yii.
Просто верстка без движка работала как надо и состояние менялось при нажатии на label.
Вам скучно что-ли?

[Михаил Р.]

Александр Степанов, Yii не имеет отношения к верстке... Если при использование Yii, ваша 'конструкция' не работает, а в 'чистом' виде работает, то скорее всего у Вас случился конфликт скриптов, но опять-же Yii здесь не причем...

На счет Вашего вопроса. Перечитал его еще раз и все равно не все понятно. Предположу, что Вы хотели сказать: при клике на label > выставить флаг checked у input?

[Дмитрий]

Добрый день.
Если не срабатывает при использовании yii, то пишите как Вы это сделали на yii, а не просто html.

[Александр Степанов]

slo_nik, я именно так и написал

[Дмитрий]

Александр Степанов, это обычный html, от yii2 тут ничего нет. Да и Ваше решение не очень...

[Александр Степанов]

slo_nik, других вариантов не нашел... и никто ничего не подсказал из того чего я не пробовал т.ч. это единственно верное решение на данный момент...

Answer 1

[Александр Степанов]

И таки нарыл сам, после написания вопроса.
Может еще кому пригодится
Добавляем js и радуемся

$('.form-check').click(
    function(){
        $(this).find(':radio').attr('checked','checked');
        //выделение всех чекбоксов на кликнутом контейнере, снять выделение через removeAttr("checked")
});

Comments

[Александр Степанов]

Mike Ro, Зачем мне их менять местами, если нажатие на label мне нужно?
Вопрос вообще читали?
Состояние не переключалось и :checked не срабатывало

[Евгений Бухарев]

Это больше костыль а не решение. Инпут элемент срабатывает пли клике в двух случаях, первый, когда инпут элемент вложен в тег лейбл, и во вторых когда они связанны через атрибут for

[ZaurK]

Скорее всего у вас конфликт подключаемых скриптов, сравните, какие файлы css и jquery на работающем варианте подключаются, и какие на неработающем, yii по умолчанию подключает свои файлы bootstrap.css и jquery, которые конфликтуют с имеющимися.

[Александр Степанов]

ZaurK, все сугубо от Yii2 advanced

Answer 2

[BenDigget]

Друзья, а зачем так сложно?
Присвойте для input id А в label используйте атрибут for

<label for="ch2">  Женский</label> <input type="radio" id="ch2">

Comments

[Александр Степанов]

Спасибо, уже позабыл как оно работает...