lundi 2 mai 2016

Checkboxes on Dynamically Created Table (only 1 selected max per row)

I have a dynamically created table that has three checkboxes per table row. What I am trying to do is have only 1 checked checkbox per table row. So if the user has a checkbox checked and they click another checkbox in the same row, it will uncheck the previous box and check the currently clicked box. I have the following code:

$('.classCheckboxOne').on 'change', ->
  if $('.classCheckboxOne').prop('checked')
    $('.classCheckboxTwo').prop('checked', false)
    $('.classCheckboxThree').prop('checked', false)

$('.classCheckboxTwo').on 'change', ->
  if $('.classCheckboxTwo').prop('checked')
    $('.classCheckboxOne').prop('checked', false)
    $('.classCheckboxThree').prop('checked', false)

$('.classCheckboxThree').on 'change', ->
  if $('.classCheckboxThree').prop('checked')
    $('.classCheckboxTwo').prop('checked', false)
    $('.classCheckboxOne').prop('checked', false)

So this code works for the first row of my table, but then the rest of the tables will not behave properly. The only other way I know to handle problems like this is to use ids instead of class names, but this will not work for my case since the table is dynamically created so there will be multiple rows with table elements containing the same id. So my question is how to get the above functionality working on each of my table rows. Thank you.




Aucun commentaire:

Enregistrer un commentaire