Increment class name in Jquery input function

Question

I have checkbox input with class name that increment with each loop i.e item1, item2, item3, ...

I'm using django python so the original html code looks like below but I have modified it in the snippet to make it runs.

Original code:


  {% for a in items %}
  
  {% endfor %}

  
    Items
    Amount
    Check 1
    Check 2
  

    {{a.title}}
    {{a.amount}}

//to make sure only one checkbox can be checked for each item in the row
for (i = 1; i < 10; i++) {
  $('.item1' + i).on('input', function() {
    $('input.item' + i).not(this).prop('checked', false);
  });
}





  
    Items
    Amount
    Check 1
    Check 2
  
  
    Item 1
    $10
    
    
  
  
    Item 2
    $20
    
    
  
  
    Item 3
    $30
    
    
  
  
    Item 4
    $40
    
    
  
  
    Item 5
    $50

How can I increment the class in the input jquery function so that only one checkbox for each row can be checked at a time ?

Greedo · Accepted Answer

I find this usage of class a bit confusing, as it loses its original meaning. This solution avoid the numeral classes and relies on the table structure:

//to make sure only one checkbox can be checked for each item in the row
$('.item').on('change', function() {
  $(this).parents("tr").find(".item").not(this).prop('checked', false);
});





  
    Items
    Amount
    Check 1
    Check 2
  
  
    Item 1
    $10
    
    
  
  
    Item 2
    $20
    
    
  
  
    Item 3
    $30
    
    
  
  
    Item 4
    $40
    
    
  
  
    Item 5
    $50

Increment class name in Jquery input function

Answers (1)

Related Questions