Funktion, um Checkboxen zu ändern, die nicht an dynamisch erstellten Tabelle arbeiten

Question

Ich habe eine Tabelle, dass jede Zeile drei Kontrollkästchen hat, was ich versuche zu tun ist, so dass nur ein Kontrollkästchen pro Zeile ausgewählt werden kann. Wenn ein Kontrollkästchen aktiviert ist, sind die anderen Kontrollkästchen deaktiviert. Der Code, den ich habe zur Zeit ist die folgende:

$('#idCheckboxOne').on 'change', -> 
    if $('#idCheckboxOne').prop('checked') 
    $('#idCheckboxTwo').prop 'checked', false 
    $('#idCheckboxThree').prop 'checked', false 

$('#idCheckboxTwo').on 'change', -> 
    if $('#idCheckboxTwo').prop('checked') 
    $('#idCheckboxOne').prop 'checked', false 
    $('#idCheckboxThree').prop 'checked', false 

$('#idCheckboxThree').on 'change', -> 
    if $('#idCheckboxThree').prop('checked') 
    $('#idCheckboxTwo').prop 'checked', false 
    $('#idCheckboxOne').prop 'checked', false 

So Dieser Code wird in der ersten Zeile von meinem Tisch arbeiten, aber keine andere Reihe. Ich weiß, dass ein Teil meines Problems darin besteht, dass ich die Funktion über die IDs des Kontrollkästchens verwende. Da also jede Tabellenzeile dieselben Ankreuzfelder hat, sind die IDs für die anderen Tabellenzeilen nicht eindeutig. Also meine Frage ist, was ist am besten geeignet für die oben genannten Funktionen für jede Tabellenzeile?

Answer 1

zwei Ansätze:

1. Verwenden Radiobuttons anstelle von Kontrollkästchen. Es kann nur eine der gleichnamigen Optionsfelder ausgewählt werden.

2. Wenn aus irgendeinem Grund Sie Kontrollkästchen wollen Tasten statt Radio verwenden, können Sie Klasse statt IDs verwenden:

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

Answer 2

Dies gibt Ihnen eine generische Lösung für jede Checkbox, dass Sie Setzen Sie die .group-checks Klasse auf. Dies wird auch parent agnostic sein, also könnte es in einer Reihe, div sein - es spielt keine Rolle, solange die Checkboxen im gleichen Container sind.

// attach handler to all checkboxes  
$('input:checkbox.grouped-checks').change(function(event) { 
    // get the container of the checkbox clicked 
    var $parent = $(this).parent(); 
    // unchecked all inputs in the container 
    $parent.children('input[type="checkbox"]').prop('checked', false); 
    // check the one you clicked on 
    $(this).prop('checked', true); 
}); 

Hier ist der codepen: „., Was ich versuche, es zu tun haben, so dass nur eine Checkbox pro Zeile ausgewählt werden kann, wenn ein Kontrollkästchen aktiviert ist, werden die anderen Kontrollkästchen deaktiviert sein“