Tengo 4 conjuntos de botones de radio y, según la selección del botón de radio, quiero limitar la selección de la casilla de verificación manteniendo los valores seleccionados previamente.
Por ejemplo, para la opción 1 (botón de radio), solo se pueden seleccionar 4 casillas de verificación, y para la opción 2 (botón de radio), el límite es de 6 casillas de verificación, pero si selecciono la opción 2 después de seleccionar 4 valores (casillas de verificación) de la opción 1, entonces el la segunda opción debe tener 2 valores más para seleccionar manteniendo los valores seleccionados previamente.
Cualquier ayuda sería apreciada.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="radio_cont"> <input type="radio" name="box" value="box_4"/>pack of 4 <input type="radio" name="box" value="box_6"/>pack of 6 <input type="radio" name="box" value="box_9"/>pack of 9 <input type="radio" name="box" value="box_11"/>pack of 11 </div> <div class="result_sel"> <input type="checkbox" name="gift" value ="1"/>One<br /> <input type="checkbox" name="gift" value ="2"/>Two <br /> <input type="checkbox" name="gift" value ="3"/>three<br /> <input type="checkbox" name="gift" value ="4"/>four<br /> <input type="checkbox" name="gift" value ="5"/>five<br /> <input type="checkbox" name="gift" value ="6"/>six<br /> <input type="checkbox" name="gift" value ="7"/>seven<br /> <input type="checkbox" name="gift" value ="8"/>eight<br /> <input type="checkbox" name="gift" value ="9"/>nine<br /> <input type="checkbox" name="gift" value ="10"/>ten<br /> <input type="checkbox" name="gift" value ="11"/>eleven<br /> </div>utilizar este:
const parent = document.querySelector( ".result_sel" ); parent.querySelectorAll( "input[type='checkbox']" ).forEach( input => { input.addEventListener( "change", check_limit ) } ); function check_limit() { const radio_1 = document.getElementById( "box_4" ); const radio_2 = document.getElementById( "box_6" ); const radio_3 = document.getElementById( "box_9" ); const radio_4 = document.getElementById( "box_11" ); const select_all_checked = parent.querySelectorAll( "input:checked" ); if ( radio_1.checked ) { //only available 4 checkbox if ( select_all_checked && select_all_checked.length > 4 ) { this.checked = false; return; } } else if ( radio_2.checked ) { if ( select_all_checked && select_all_checked.length > 6 ) { this.checked = false; return; } } else if ( radio_3.checked ) { if ( select_all_checked && select_all_checked.length > 9 ) { this.checked = false; return; } } else if ( radio_4.checked ) { if ( select_all_checked && select_all_checked.length > 11 ) { this.checked = false; return; } } } <div class="radio_cont"> <input type="radio" name="box" value="4" id="box_4"/>pack of 4 <input type="radio" name="box" value="6" id="box_6"/>pack of 6 <input type="radio" name="box" value="9" id="box_9"/>pack of 9 <input type="radio" name="box" value="11" id="box_11"/>pack of 11 </div> <div class="result_sel"> <input type="checkbox" name="gift" value ="1"/>One<br /> <input type="checkbox" name="gift" value ="2"/>Two <br /> <input type="checkbox" name="gift" value ="3"/>three<br /> <input type="checkbox" name="gift" value ="4"/>four<br /> <input type="checkbox" name="gift" value ="5"/>five<br /> <input type="checkbox" name="gift" value ="6"/>six<br /> <input type="checkbox" name="gift" value ="7"/>seven<br /> <input type="checkbox" name="gift" value ="8"/>eight<br /> <input type="checkbox" name="gift" value ="9"/>nine<br /> <input type="checkbox" name="gift" value ="10"/>ten<br /> <input type="checkbox" name="gift" value ="11"/>eleven<br /> </div>