Ad
Restrict The Choice Of Radio Button By JavaScript
I have a form in which the pair of radio buttons are located, and the names of each pair are the same. How to limit the number of choices. See the image below
How do I make sure the user is finally able to select 3 rows and no more?
this html code
<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>
Ad
Answer
From javascript, you can add event listeners on all radios and once the user selects 3 you disable the other controls.
If they unselect some and have < 3 selected you enable them again.
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad