vendredi 20 mars 2020

jQuery Selectors or 'if' trouble

This code should prohibit clicking more than two radiobuttons in total (there are three groups of such buttons).

This works when there is no container 'label', but when it is, it doesn't work (it looks like that 'if' construct is not working; everything that is written outside of it works fine)

how to make it work without removing the label? Is there any solutions?

var radio_limit = 2;

$('.pricing-levels-3 label input').on('change', function(evt) {

   if($(this).siblings(':checked').length >= radio_limit) {
       this.checked = false;
   };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pricing-levels-3">
         <p><strong>Select 2 Levels</strong></p>
         <label>
           <input type="radio" name="vehicle" value="1">Level 1<br>
           <input type="radio" name="vehicle" value="2">Level 2<br>
           <input type="radio" name="vehicle" value="3">Level 3<br>
         </label>
         <label>
           <br>
           <input type="radio" name="vehicle2" value="1">Level 1<br>
           <input type="radio" name="vehicle2" value="2">Level 2<br>
           <input type="radio" name="vehicle2" value="3">Level 3<br>
         </label>
         <label>
           <br>
           <input type="radio" name="vehicle3" value="1">Level 1<br>
           <input type="radio" name="vehicle3" value="2">Level 2<br>
           <input type="radio" name="vehicle3" value="3">Level 3<br>
           <br>
         </label>
</div>

Aucun commentaire:

Enregistrer un commentaire