通过 JavaScript 限制单选按钮的选择答案

【问题标题】：Restrict the choice of radio button by JavaScript通过 JavaScript 限制单选按钮的选择
【发布时间】：2020-05-05 16:47:45
【问题描述】：

我有一个表单，其中有一对单选按钮，每对的名称都相同。如何限制选择的数量。见下图

sample image

我如何确保用户最终能够选择 3 行而不是更多？

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

【问题讨论】：

分享你的代码。
@hasan-iman 我添加了代码，你的答案是什么？

标签： javascript html

【解决方案1】：

通过 javascript，您可以在所有收音机上添加事件侦听器，一旦用户选择 3，您就可以禁用其他控件。

如果他们取消选择某些并选择了

Attach event listener through javascript to radio button

【讨论】：