Ограничить выбор радиокнопки JavaScript - PullRequest
1 голос
/ 05 мая 2020

У меня есть форма, в которой пара переключателей расположена, и названия каждой пары совпадают. Как ограничить количество вариантов. См. Изображение ниже

образец изображения

Как убедиться, что пользователь наконец может выбрать 3 строки и не более?

this html код

<div class="bread-scroll-box" style="">
    @foreach ($additives as $additive)
        <div class="d-flex justify-content-between hover-bg-gray trs p-3">
            <div class="make-cake-img">
                <img src="{{ $additive->icon }}" alt="">
            </div>
            <div class="bread-title w-100 pr-3">
                <p class="text-12 weight-800 mb-0">{{ $additive->title }}</p>
                <small class="text-gray">{{ $additive->description }}</small>
            </div>
            <div class="bread-check w-25">
                <label class="x-checkbox-no-bg">select
                    <input type="radio" name="checkbox{{ $additive->id }}" class="right-select" data-weight="{{ round(($additive->weight / 2) * $tray->ratio) }}" data-price="{{ $additive->price }}" data-img="{{ $additive->halfImgUrl }}" data-id="{{ $additive->id }}">
                    <span class="checkmark"></span>
                </label>
            </div>
            <div class="bread-check w-25">
                <label class="x-checkbox-no-bg">double
                    <input type="radio" name="checkbox{{ $additive->id }}" class="right-select" data-weight="{{ round(($additive->weight / 2) * $tray->ratio) }}" data-price="{{ $additive->price }}" data-img="{{ $additive->doubleHalfImgUrl }}" data-id="{{ $additive->id }}">
                    <span class="checkmark"></span>
                </label>
            </div>
        </div>
    @endforeach
</div>

1 Ответ

1 голос
/ 05 мая 2020

Начиная с javascript, вы можете добавить прослушиватели событий на все rad ios, и как только пользователь выберет 3, вы отключите другие элементы управления.

Если они отменили выбор некоторых и выбрали <3, вы включаете их снова . </p>

Присоединить прослушиватель событий через javascript к переключателю

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...